feat: add SASS support and remove unused Toaster component

afarago · Nov 12, 2024 · 858c0d3 · 858c0d3
1 parent bb1553e
commit 858c0d3
Show file tree

Hide file tree

Showing 10 changed files with 560 additions and 177 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,6 +20,9 @@
     "react-bootstrap": "^2.10.5",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
+    "sass": "^1.80.6",
+    "sass-loader": "^16.0.3",
+    "style-loader": "^4.0.0",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },

diff --git a/src/App.css → src/App.scss b/src/App.css → src/App.scss
@@ -1,13 +1,18 @@
+$drop-highlight-color: cornflowerblue;
+$success-color: rgba(144, 238, 144, 1);
+$success-outline: rgba(144, 238, 144, 0.5);
+$headerfooter-background-color: whitesmoke;
+
 body {
     min-height: 100vh;
     position: relative;
-}
 
-body::after {
-    content: '';
-    display: block;
-    height: 4em;
-    /* Set same as footer's height */
+    &::after {
+        content: '';
+        display: block;
+        height: 4em;
+        /* Set same as footer's height */
+    }
 }
 
 footer {
@@ -18,97 +23,91 @@ footer {
     padding-top: 1em;
     width: 100%;
     height: 60px;
-    background-color: whitesmoke;
+    background-color: $headerfooter-background-color;
 }
 
 header nav {
-    background-color: whitesmoke;
+    background-color: $headerfooter-background-color;
 }
 
-/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
-for details on configuring this project to bundle and minify static web assets. */
-
-a.navbar-brand {
+.navbar-brand {
     white-space: normal;
     text-align: center;
     word-break: break-all;
+    font-size: 200%;
+    padding-bottom: 0px;
+    .brandlogo {
+        position: relative;
+        top: -5px;
+    }
 }
 
-/* Provide sufficient contrast against white background */
-a {
-    color: #0366d6;
-}
-
-.btn-primary {
-    color: #fff;
-    background-color: #1b6ec2;
-    border-color: #1861ac;
-}
-
-.nav-pills .nav-link.active,
-.nav-pills .show > .nav-link {
-    color: #fff;
-    background-color: #1b6ec2;
-    border-color: #1861ac;
+.tab-main {
+    min-height: 30vh;
 }
 
-/* Main page
--------------------------------------------------- */
-
 .tab-pane {
     min-height: 32vh;
     position: relative;
 }
 
 .tab-welcome {
+    align-items: center;
     --icon-size: 3.5em;
     --icon-size-big: 10em;
-}
 
-.tab-welcome img.icon {
-    height: var(--icon-size);
-    width: var(--icon-size);
-    margin-inline: 0.2em;
+    img.icon {
+        height: var(--icon-size);
+        width: var(--icon-size);
+        margin-inline: 0.2em;
+    }
+    i.tranform-caret-icon {
+        color: cornflowerblue;
+        font-size: calc(var(--icon-size) * 0.5);
+        display: inline-block;
+        vertical-align: middle;
+    }
+    i.drop-cloud-icon {
+        font-size: var(--icon-size-big);
+        color: cornflowerblue;
+        line-height: 1em;
+    }
 }
 
-/* Main page Animated drop area
--------------------------------------------------- 
-    from: https://css-tricks.com/more-control-over-css-borders-with-background-image/
-*/
-
 .main-content.drop-active {
     background-image: repeating-linear-gradient(
             -60deg,
-            #f6c407,
-            #f6c407 9.3px,
+            $drop-highlight-color,
+            $drop-highlight-color 9.3px,
             transparent 30px,
             transparent 39.3px,
-            #f6c407 60px
+            $drop-highlight-color 60px
         ),
         repeating-linear-gradient(
             30deg,
-            #f6c407,
-            #f6c407 9.3px,
+            $drop-highlight-color,
+            $drop-highlight-color 9.3px,
             transparent 30px,
             transparent 39.3px,
-            #f6c407 60px
+            $drop-highlight-color 60px
         ),
         repeating-linear-gradient(
             120deg,
-            #f6c407,
-            #f6c407 9.3px,
+            $drop-highlight-color,
+            $drop-highlight-color 9.3px,
             transparent 30px,
             transparent 39.3px,
-            #f6c407 60px
+            $drop-highlight-color 60px
         ),
         repeating-linear-gradient(
             210deg,
-            #f6c407,
-            #f6c407 9.3px,
+            $drop-highlight-color,
+            $drop-highlight-color 9.3px,
             transparent 30px,
             transparent 39.3px,
-            #f6c407 60px
+            $drop-highlight-color 60px
         );
+    background-color: rgba($drop-highlight-color, 0.1);
     background-size: 3px calc(100% + 120px), calc(100% + 120px) 3px,
         3px calc(100% + 120px), calc(100% + 120px) 3px;
     background-position: 0 0, 0 0, 100% 0, 0 100%;
@@ -127,20 +126,18 @@ a {
     }
 }
 
-/* ----- */
-
 @keyframes copysuccess-animation {
     from {
-        outline: 0px solid rgba(144, 238, 144, 0.5);
+        outline: 0px solid $success-outline;
     }
     30% {
-        outline: 6px solid rgba(144, 238, 144, 1);
+        outline: 6px solid $success-color;
     }
     90% {
-        outline: 6px solid rgba(144, 238, 144, 1);
+        outline: 6px solid $success-color;
     }
     to {
-        outline: 0px solid rgba(144, 238, 144, 0.5);
+        outline: 0px solid $success-outline;
     }
 }
 
@@ -150,22 +147,18 @@ a {
     right: 0;
     cursor: pointer;
     border-radius: 5px;
-    border: 1px #ccc solid;
+    border: 1px lightgray solid;
     margin: 0.5em;
     z-index: 999;
-}
-
-.copy-button.success {
-    animation: copysuccess-animation 0.5s 1 ease-in;
-    animation-delay: 0s;
-    animation-fill-mode: forwards;
-    -webkit-animation-fill-mode: forwards;
-    outline: 2px solid lightgreen;
-    background-color: hsl(120, 73%, 80%);
-}
 
-#tab-content-wrapper {
-    position: relative;
+    &.success {
+        animation: copysuccess-animation 0.5s 1 ease-in;
+        animation-delay: 0s;
+        animation-fill-mode: forwards;
+        -webkit-animation-fill-mode: forwards;
+        outline: 2px solid lightgreen;
+        background-color: hsl(120, 73%, 80%);
+    }
 }
 
 .nav-tabs {
@@ -180,10 +173,10 @@ a {
     top: 0;
     opacity: 0.3;
     z-index: 998;
-}
 
-.svg-minimap:hover {
-    opacity: 1;
+    &:hover {
+        opacity: 1;
+    }
 }
 
 .preview-svg {
@@ -201,13 +194,13 @@ a {
 .fileptions {
     display: flex;
     flex-direction: row;
-}
 
-.fileptions > small:first-child {
-    flex: 1 1;
-}
-.fileptions > small:last-child {
-    flex: 0 1;
+    > small:first-child {
+        flex: 1 1;
+    }
+    > small:last-child {
+        flex: 0 1;
+    }
 }
 
 .example-content-button {
@@ -219,8 +212,8 @@ a {
     outline: 0px;
     vertical-align: unset;
     user-select: none;
-}
 
-.example-content-button:focus {
-    box-shadow: none;
+    &:focus {
+        box-shadow: none;
+    }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { convertProjectToPython, PyConverterOptions, PyProjectResult } from 'blocklypy';
-import './App.css';
+import './App.scss';
 import Header from './Header';
 import Footer from './Footer';
 import FileSelector from './FileSelector';
@@ -29,11 +29,7 @@ const App: React.FC = () => {
                 debug: {},
             } as PyConverterOptions;
 
-            if (
-                options.debug &&
-                (document.getElementById('additionalCommentsCheck') as HTMLInputElement) //!!!
-                    .checked
-            ) {
+            if (options.debug && isAdditionalCommentsChecked) {
                 options.debug.showExplainingComments = true;
             }
 

diff --git a/src/FileSelector.tsx b/src/FileSelector.tsx
@@ -38,8 +38,6 @@ const FileSelector: React.FC<{
                     const dataTransfer = new DataTransfer();
                     dataTransfer.items.add(file);
 
-                    // ($('#file-selector').get(0) as HTMLInputElement).files =
-                    //     dataTransfer.files;
                     setSelectedFile(file);
                 })
                 .catch((error: unknown) => {
@@ -101,7 +99,7 @@ const FileSelector: React.FC<{
                     <small>
                         <Form.Check
                             type="switch"
-                            id="additionalCommentsCheck"
+                            id="additionalCommentsCheck" // needed for the label to be clickable
                             label="Explanatory&nbsp;Comments"
                             checked={isAdditionalCommentsChecked}
                             onChange={handleAdditionalCommentsChange}

diff --git a/src/Header.tsx b/src/Header.tsx
@@ -5,15 +5,8 @@ const Header: React.FC = () => {
         <header>
             <nav className="navbar navbar-expand-sm border-bottom box-shadow mb-3">
                 <div className="container">
-                    <span
-                        className="navbar-brand"
-                        style={{ fontSize: '200%', paddingBottom: '0px' }}
-                    >
-                        <svg
-                            height="1.5em"
-                            width="4em"
-                            style={{ position: 'relative', top: '-5px' }}
-                        >
+                    <span className="navbar-brand">
+                        <svg height="1.5em" width="4em" className="brandlogo">
                             <use
                                 href="./static/img/logo_full.svg#icon"
                                 xlinkHref="img/logo_full.svg#icon"

diff --git a/src/TabMain.tsx b/src/TabMain.tsx
@@ -33,11 +33,10 @@ const MainTab: React.FC<{
 
     return (
         <div
-            id="tabs-main"
-            className={
-                (!isInitial ? 'd-flex' : 'd-none') + ' flex-column flex-fill p-2'
-            }
-            style={{ minHeight: '30vh' }}
+            className={classNames('tab-main', 'flex-column', 'flex-fill', 'p-2', {
+                'd-flex': !isInitial,
+                'd-none': isInitial,
+            })}
         >
             <Tab.Container
                 activeKey={key}
@@ -97,7 +96,11 @@ const MainTab: React.FC<{
                             ></div>
 
                             {['pycode', 'pseudocode'].map((key) => (
-                                <Tab.Pane eventKey={key} className="p-4" key={key}>
+                                <Tab.Pane
+                                    eventKey={key}
+                                    className={`p-4 preview-${key}`}
+                                    key={key}
+                                >
                                     <button
                                         className={classNames(
                                             'copy-button',
@@ -109,11 +112,10 @@ const MainTab: React.FC<{
                                         onClick={handleCopyButtonClick}
                                     >
                                         <i
-                                            className={classNames(
-                                                'bi',
-                                                { 'bi-copy': !isCopying },
-                                                { 'bi-clipboard-check': isCopying },
-                                            )}
+                                            className={classNames('bi', {
+                                                'bi-copy': !isCopying,
+                                                'bi-clipboard-check': isCopying,
+                                            })}
                                         ></i>
                                     </button>
                                     <pre className={`preview-${key}`}>
@@ -124,9 +126,8 @@ const MainTab: React.FC<{
                                 </Tab.Pane>
                             ))}
 
-                            <Tab.Pane eventKey="preview" className="p-4">
+                            <Tab.Pane eventKey="preview" className="p-4 preview-svg">
                                 <div
-                                    id="preview-svg"
                                     dangerouslySetInnerHTML={{
                                         __html: svgContent || '',
                                     }}