refactor: removed all SCSS code

Author: amatiasq

index.html

@@ -12,6 +12,12 @@
       crossorigin="anonymous"
     />
     <link rel="stylesheet" href="./src/reset.css" />
+    <style>
+      body {
+        background-color: black;
+        height: 100vh;
+      }
+    </style>
     <link rel="apple-touch-icon" href="apple-icon-180.png" />
 
     <meta name="apple-mobile-web-app-capable" content="yes" />

package-lock.json

@@ -28,6 +28,7 @@
     "@szhsin/react-menu": "^3.1.2",
     "axios": "^0.21.2",
     "body-parser": "^1.19.0",
+    "colorjs.io": "^0.3.0",
     "cors": "^2.8.5",
     "express": "^4.17.1",
     "localforage": "^1.9.0",
@@ -51,7 +52,6 @@
     "dotenv": "^10.0.0",
     "eslint": "^7.19.0",
     "husky": "^7.0.1",
-    "sass": "^1.32.6",
     "typescript": "^4.3.5",
     "vite": "^3.0.4",
     "vite-plugin-pwa": "^0.12.3"

package.json

@@ -0,0 +1,2 @@
+export const mobileOnly = ' @media (max-width: 850px)';
+export const desktopOnly = '@media (min-width: 851px)';

src/0-dom/color-scheme.scss

@@ -30,20 +30,20 @@
 
   animation-name: tooltip-show-hide;
   animation-duration: 3s;
+}
 
-  &.top {
-    transform: translate(-50%, calc(-100% - 16px));
-  }
+.tooltip.top {
+  transform: translate(-50%, calc(-100% - 16px));
+}
 
-  &.bottom {
-    transform: translate(-50%, 16px);
-  }
+.tooltip.bottom {
+  transform: translate(-50%, 16px);
+}
 
-  &.left {
-    transform: translate(calc(-100% - 16px), -50%);
-  }
+.tooltip.left {
+  transform: translate(calc(-100% - 16px), -50%);
+}
 
-  &.right {
-    transform: translate(16px, -50%);
-  }
+.tooltip.right {
+  transform: translate(16px, -50%);
 }

src/0-dom/ellipsis.scss

@@ -1,6 +1,6 @@
 import { getMousePosition } from '../1-core/mouse';
 import { escapeHtml } from './escapeHtml';
-import './tooltip.scss';
+import './tooltip.css';
 
 export function tooltip(
   text: string,

src/0-dom/fit-parent.scss

@@ -1,14 +1,66 @@
+import { Global } from '@emotion/react';
+import styled from '@emotion/styled';
 import { useEffect, useState } from 'react';
+import { desktopOnly, mobileOnly } from '../0-dom/responsive';
 import { createStore } from '../4-storage';
 import { AppStorage } from '../4-storage/AppStorage';
 import { useNavigator } from '../6-hooks/useNavigator';
 import { Loader } from '../7-components/atoms/Loader';
 import { NotesList } from '../7-components/NotesList/NotesList';
-import './App.scss';
 import { StorageContext } from './contexts';
 import { Router } from './Router';
+import { globalStyles } from './theme';
 import { useGithubAuth } from './useGithubAuth';
 
+const StyledAppContainer = styled.div`
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+
+  font-family: Arial, Helvetica, sans-serif;
+
+  display: grid;
+  align-items: stretch;
+  align-content: stretch;
+  justify-items: stretch;
+  grid-template-rows: minmax(0, 1fr);
+
+  --gist-item-height: 28px;
+
+  > main {
+    grid-area: editor;
+    z-index: 1;
+  }
+
+  ${mobileOnly} {
+    grid-template-columns: 100vw;
+
+    &.page-home {
+      grid-template-areas: 'list';
+    }
+
+    &.page-note {
+      grid-template-areas: 'editor';
+
+      > aside {
+        display: none;
+      }
+    }
+  }
+
+  ${desktopOnly} {
+    &:not(.page-home) {
+      --sidebar-width: calc(
+        calc(var(--setting-sidebarWidth, 400) * var(--setting-sidebarVisible)) *
+          1px
+      );
+    }
+
+    grid-template-columns: var(--sidebar-width) 1fr;
+    grid-template-areas: 'list editor';
+  }
+`;
+
 export function App() {
   const [store, setStore] = useState<AppStorage>(null!);
   const { token, username } = useGithubAuth();
@@ -43,12 +95,13 @@ export function App() {
 
   return (
     <StorageContext.Provider value={store}>
-      <div className={`app page-${pageName}`}>
+      <Global styles={globalStyles} />
+      <StyledAppContainer className={`page-${pageName}`}>
         <NotesList />
         <main>
           <Router />
         </main>
-      </div>
+      </StyledAppContainer>
     </StorageContext.Provider>
   );
 }

src/0-dom/hide-scrollbar.scss

@@ -0,0 +1,68 @@
+import { css } from '@emotion/react';
+import Color from 'colorjs.io';
+import { desktopOnly } from '../0-dom/responsive';
+
+const fg = new Color('#c4c4c4').to('lch');
+const bg = new Color('#1c1c1c').to('lch');
+const sidebar = new Color('#252526').to('lch');
+const border = new Color('#343637').to('lch');
+const primary = new Color('#669bd1').to('lch');
+const secondary = new Color('#f2f230').to('lch');
+// const secondary = new Color('#d16014');
+// const secondary = new Color('#c9866e');
+
+const rgba = (color: Color, l = 0) =>
+  color
+    .clone()
+    .set('l', color.l + l)
+    .to('sRGB')
+    .toString();
+
+export const globalStyles = css`
+  #app-container {
+    color: var(--fg-color);
+    background-color: var(--bg-color);
+    width: 100vw;
+    height: 100vh;
+
+    &.is-virtual-keyboard-open .mobile-fallback {
+      height: 50%;
+    }
+
+    --animation-speed: 0.25s;
+    --group-border-width: 2px;
+    --status-line-width: var(--group-border-width);
+    --status-line-color: transparent;
+
+    {mobileOnly} {
+      --sidebar-font-size: 1rem;
+      --sidebar-gap: 0.5rem;
+    }
+
+    ${desktopOnly} {
+      --sidebar-font-size: 0.9rem;
+      --sidebar-gap: 0.4rem;
+    }
+
+    --fg-color: ${rgba(fg)};
+    --fg-color-active: ${rgba(fg, 100)};
+
+    --bg-color: ${rgba(bg)};
+    --bg-color-sidebar: ${rgba(sidebar)};
+    --bg-color-control: ${rgba(bg, -2)};
+    --bg-color-hover: ${rgba(bg, 10)};
+    --border-color: ${rgba(border)};
+
+    --bg-color-active: ${rgba(primary, -20)};
+    --border-color-active: ${rgba(primary, 0)};
+
+    --note-item-color: ${rgba(bg, 2)};
+    --favorite-color: ${rgba(secondary)};
+
+    --group-color: var(--bg-color-sidebar);
+    --group-active-color: ${rgba(primary, -30)};
+    --group-border-color: ${rgba(secondary, -30)};
+
+    // }
+  }
+`;

src/0-dom/responsive.scss

@@ -1,11 +1,40 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { useMonaco } from '@monaco-editor/react';
 import { createRef, useEffect, useState } from 'react';
+import { hideScrollbar } from '../../0-dom/hideScrollbar';
 import { useSetting } from '../../6-hooks/useSetting';
-import './MobileFallback.scss';
 import { extendMonaco } from './monaco/extendMonaco';
 import { theme } from './monacoConfiguration';
 
-// import MarkdownPreview from '@uiw/react-markdown-preview';
+const Fallback = css`
+  box-sizing: border-box;
+  padding: 24px;
+  height: 100vh;
+  --toolbar-height: 0;
+`;
+
+const Preview = styled.pre`
+  ${Fallback}
+  ${hideScrollbar}
+  font-size: 13px;
+  line-height: 1.15rem;
+  overflow: auto;
+`;
+
+const Textarea = styled.textarea`
+  ${Fallback}
+  appearance: none;
+  border: none;
+  outline: none;
+  padding: 8px;
+  background-color: #1c1c1c;
+  color: inherit;
+  width: 100%;
+  height: calc(100vh - var(--toolbar-height));
+  padding: 32px;
+  box-sizing: border-box;
+`;
 
 export interface MobileFallbackProps {
   language: string;
@@ -46,37 +75,22 @@ export function MobileFallback({
 
   if (!isPreview) {
     return (
-      <textarea
+      <Textarea
         ref={x => x?.style.setProperty('--toolbar-height', `${gap || 0}px`)}
-        className="mobile-fallback mobile-fallback--textarea"
         defaultValue={value}
         readOnly={readonly}
         autoFocus={autofocus}
         autoComplete=""
         onChange={e => onChange(e.target.value)}
-      ></textarea>
+      />
     );
   }
 
-  // if (language === 'markdown') {
-  //   return (
-  //     <div
-  //       className="mobile-fallback mobile-fallback--markdown"
-  //       onClick={() => setIsPreview(false)}
-  //     >
-  //       <MarkdownPreview className="mobile-fallback--renderer" source={value} />
-  //     </div>
-  //   );
-  // }
-
   return (
-    <pre
-      className="mobile-fallback mobile-fallback--code"
-      onClick={() => setIsPreview(false)}
-    >
+    <Preview onClick={() => setIsPreview(false)}>
       <code ref={ref} lang={language} data-lang={language}>
         {value}
       </code>
-    </pre>
+    </Preview>
   );
 }

src/0-dom/responsive.ts

@@ -1,3 +1,4 @@
+import styled from '@emotion/styled';
 import Editor, { useMonaco } from '@monaco-editor/react';
 import { editor } from 'monaco-editor';
 import { isMobile } from '../../0-dom/isMobile';
@@ -6,7 +7,12 @@ import { useSetting } from '../../6-hooks/useSetting';
 import { MobileFallback } from './MobileFallback';
 import { extendMonaco } from './monaco/extendMonaco';
 import * as hardcodedConfig from './monacoConfiguration';
-import './MonacoEditor.scss';
+
+const StyledEditor = styled(Editor)`
+  .monaco-editor {
+    overflow: hidden;
+  }
+`;
 
 export function MonacoEditor({
   value,
@@ -43,7 +49,7 @@ export function MonacoEditor({
   }
 
   return (
-    <Editor
+    <StyledEditor
       className="editor"
       height={gap ? `calc(100vh - ${gap}` : '100vh'}
       theme={hardcodedConfig.theme}

src/0-dom/shadow-on-scroll.scss

@@ -24,9 +24,8 @@ const NoteItemContainer = styled.h5`
   cursor: pointer;
   gap: var(--sidebar-gap);
   padding: var(--sidebar-gap);
+  border: 1px solid transparent;
   border-left: var(--status-line-width) solid var(--status-line-color);
-  border-bottom: 1px solid transparent;
-  background-color: var(--note-item-color);
   user-select: none;
 
   &:hover {

src/0-dom/tooltip.scss src/0-dom/tooltip.css

@@ -40,9 +40,9 @@ export function BusinessIndicator() {
 
   useEffect(() => onBusinessChange(setIsBusy) as () => void);
 
-  // if (!isBusy) {
-  //   return null;
-  // }
+  if (!isBusy) {
+    return null;
+  }
 
   return (
     <Container>

src/0-dom/tooltip.ts

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import styled from '@emotion/styled';
+import { useEffect, useState } from 'react';
 import { DEFAULT_SETTINGS } from '../../2-entities/Settings';
 import { DEFAULT_SHORTCUTS } from '../../2-entities/Shortcuts';
 import { RemoteJson } from '../../4-storage/helpers/RemoteJson';
@@ -7,7 +8,38 @@ import { useStore } from '../../6-hooks/useStore';
 import { isDeserializable, serialize } from '../../util/serialization';
 import { Loader } from '../atoms/Loader';
 import { Editor } from '../Editor/Editor';
-import './EditSettings.scss';
+
+const SettingsEditor = styled.div`
+  flex: 1;
+`;
+
+const TabContainer = styled.nav`
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  min-height: 2rem;
+  border-left: 1px solid var(--border-color);
+  background-color: var(--bg-color-sidebar);
+  padding: var(--sidebar-gap);
+  gap: calc(var(--sidebar-gap) * 2);
+`;
+
+const Tab = styled.div`
+  --spacing: calc(var(--sidebar-gap) * 1.6);
+
+  cursor: default;
+  border: 1px solid var(--border-color);
+  padding: var(--spacing);
+
+  &:first-of-type {
+    border-left: 1px solid var(--border-color);
+  }
+
+  &.active,
+  &:hover {
+    background-color: var(--bg-color-hover);
+  }
+`;
 
 function useRemoteJson<T>(remote: RemoteJson<T>) {
   const [loading, setLoading] = useState(true);
@@ -71,20 +103,24 @@ export function EditSettings() {
   const { loading, ...selected } = tabs[tab];
 
   return (
-    <div className="settings-editor">
-      <nav>
+    <SettingsEditor>
+      <TabContainer>
         {tabs.map((x, i) => (
-          <div key={x.title} className="tab" onClick={() => setTab(i)}>
+          <Tab
+            key={x.title}
+            className={tab === i ? 'active' : undefined}
+            onClick={() => setTab(i)}
+          >
             {x.title}
-          </div>
+          </Tab>
         ))}
-      </nav>
+      </TabContainer>
 
       {loading ? (
         <Loader />
       ) : (
         <Editor key={selected.title} gap="33px" ext=".json" {...selected} />
       )}
-    </div>
+    </SettingsEditor>
   );
 }