Migrate from (S)CSS Modules to styled-components (#45)

ImXico · Feb 12, 2023 · ec50cb5 · ec50cb5
1 parent 2eb2f6f
commit ec50cb5
Show file tree

Hide file tree

Showing 32 changed files with 498 additions and 448 deletions.
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "redux": "^4.0.5",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0",
+    "styled-components": "^5.3.6",
     "typescript": "^4.9.4"
   },
   "devDependencies": {
@@ -37,7 +38,6 @@
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "prettier": "2.8.3",
-    "sass": "^1.57.1",
     "wait-on": "^3.3.0"
   },
   "scripts": {

diff --git a/src/components/App/App.scss b/src/components/App/App.scss
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -1,21 +1,22 @@
 import React, { useEffect } from "react";
-import { ThemeWrapper, Themes } from "../ThemeWrapper/ThemeWrapper";
-import { TitleBar, TitleBarStyles } from "../TitleBar/TitleBar";
+import { ThemeProvider } from "styled-components";
+import { TitleBar } from "../TitleBar/TitleBar";
 import TabAreaContainer from "../../containers/TabAreaContainer";
 import TextAreaContainer from "../../containers/TextAreaContainer";
 import ToastPopupContainer from "../../containers/ToastPopupContainer";
 import { ConnectedProps, DispatchProps } from "../../containers/AppContainer";
 import { IpcActions } from "../../shared/ipcActions";
-import "./App.scss";
+import { RightPaneWrapper, WorkingAreaWrapper } from "./styled";
+import { DarkTheme, LightTheme } from "../../themes";
 
 const { ipcRenderer } = window.require("electron");
 
 type Props = ConnectedProps &
   DispatchProps & {
-    hasCustomTitleBar: boolean;
+    isMacOs: boolean;
   };
 
-export function App({ hasCustomTitleBar, isDarkTheme, showToast }: Props) {
+export function App({ isMacOs, isDarkTheme, showToast }: Props) {
   const handleKeydownEvents = React.useCallback((event: KeyboardEvent) => {
     if (event.metaKey || event.ctrlKey) {
       if (event.key === ".") {
@@ -43,21 +44,15 @@ export function App({ hasCustomTitleBar, isDarkTheme, showToast }: Props) {
   }, []);
 
   return (
-    <ThemeWrapper theme={isDarkTheme ? Themes.Dark : Themes.Light}>
-      <div className="working-area-container">
+    <ThemeProvider theme={isDarkTheme ? DarkTheme : LightTheme}>
+      <WorkingAreaWrapper>
         <TabAreaContainer />
-        <div className="right-pane-area-container">
+        <RightPaneWrapper>
           <TextAreaContainer />
-        </div>
-      </div>
+        </RightPaneWrapper>
+      </WorkingAreaWrapper>
       <ToastPopupContainer />
-      <TitleBar
-        barStyle={
-          hasCustomTitleBar
-            ? TitleBarStyles.WindowsOrLinux
-            : TitleBarStyles.MacOs
-        }
-      />
-    </ThemeWrapper>
+      <TitleBar isMacOs={isMacOs} />
+    </ThemeProvider>
   );
 }
diff --git a/src/components/App/styled.ts b/src/components/App/styled.ts
@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+export const WorkingAreaWrapper = styled.div`
+  display: flex;
+  overflow: hidden;
+  height: 100vh;
+`;
+
+export const RightPaneWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+`;
diff --git a/src/components/NewTabButton/NewTabButton.scss b/src/components/NewTabButton/NewTabButton.scss
diff --git a/src/components/NewTabButton/NewTabButton.tsx b/src/components/NewTabButton/NewTabButton.tsx
@@ -1,5 +1,7 @@
 import React from "react";
-import "./NewTabButton.scss";
+import { StyledNewTabButton } from "./styled";
+
+const NEW_TAB_BUTTON_SYMBOL = "+";
 
 type Props = {
   isVisible: boolean;
@@ -8,12 +10,8 @@ type Props = {
 
 export function NewTabButton({ isVisible, onClick }: Props) {
   return (
-    <button
-      type="button"
-      className={`NewTabButton ${isVisible ? "open" : ""}`}
-      onClick={onClick}
-    >
-      +
-    </button>
+    <StyledNewTabButton type="button" isVisible={isVisible} onClick={onClick}>
+      {NEW_TAB_BUTTON_SYMBOL}
+    </StyledNewTabButton>
   );
 }
diff --git a/src/components/NewTabButton/styled.ts b/src/components/NewTabButton/styled.ts
@@ -0,0 +1,17 @@
+import styled from "styled-components";
+
+export const StyledNewTabButton = styled.button<{
+  isVisible: boolean;
+}>`
+  border: none;
+  font-size: medium;
+  color: ${(props) => props.theme.textPrimaryColor};
+  background-color: ${(props) => props.theme.backgroundPrimaryColor};
+  width: ${(props) => (props.isVisible ? "100%" : "0%")};
+  opacity: ${(props) => (props.isVisible ? 1 : 0)};
+  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
+
+  &:focus {
+    outline: none;
+  }
+`;
diff --git a/src/components/PopupMenu/PopupMenu.scss b/src/components/PopupMenu/PopupMenu.scss
diff --git a/src/components/PopupMenu/PopupMenu.tsx b/src/components/PopupMenu/PopupMenu.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import "./PopupMenu.scss";
 import { PopupMenuItem } from "./PopupMenuItem";
+import { StyledPopupMenu } from "./styled";
 
 export type PopupMenuItemEntry = {
   id: number;
@@ -21,7 +21,7 @@ export function PopupMenu({ position, entries }: Props) {
   const { top, left } = position;
 
   return (
-    <div className="PopupMenu" style={{ left: `${left}px`, top: `${top}px` }}>
+    <StyledPopupMenu style={{ left: `${left}px`, top: `${top}px` }}>
       {entries.map((entry) => (
         <PopupMenuItem
           key={entry.id}
@@ -30,6 +30,6 @@ export function PopupMenu({ position, entries }: Props) {
           onEntrySelected={entry.onEntrySelected}
         />
       ))}
-    </div>
+    </StyledPopupMenu>
   );
 }
diff --git a/src/components/PopupMenu/PopupMenuItem.tsx b/src/components/PopupMenu/PopupMenuItem.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import "./PopupMenu.scss";
+import { StyledPopupMenuItem } from "./styled";
 
 type Props = {
   text: string;
@@ -8,17 +8,13 @@ type Props = {
 };
 
 export function PopupMenuItem({ text, isEnabled, onEntrySelected }: Props) {
-  const className = `PopupMenuItem PopupMenuItem--${
-    isEnabled ? "enabled" : "disabled"
-  }`;
-
   return (
-    <button
+    <StyledPopupMenuItem
       type="button"
-      className={className}
+      isEnabled={isEnabled}
       onClick={() => isEnabled && onEntrySelected()}
     >
       {text}
-    </button>
+    </StyledPopupMenuItem>
   );
 }
diff --git a/src/components/PopupMenu/styled.ts b/src/components/PopupMenu/styled.ts
@@ -0,0 +1,59 @@
+import styled, { css } from "styled-components";
+
+export const StyledPopupMenu = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  position: absolute;
+  width: 140px;
+  z-index: 1;
+  padding: 10px 15px;
+  border-radius: 2px;
+  background-color: ${(props) => props.theme.backgroundSecondaryColor};
+  box-shadow: 5px 5px 30px -3px rgba(0, 0, 0, 0.22);
+
+  &:after {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 50%;
+    width: 0;
+    height: 0;
+    border: 10px solid transparent;
+    border-right-color: ${(props) => props.theme.backgroundSecondaryColor};
+    border-left: 0;
+    margin-top: -63px;
+    margin-left: -6px;
+  }
+`;
+
+export const StyledPopupMenuItem = styled.button<{
+  isEnabled: boolean;
+}>`
+  background-color: ${(props) => props.theme.backgroundSecondaryColor};
+  border-radius: 2px;
+  border: none;
+  font-size: 0.75em;
+  margin: 2px 0;
+  padding: 10px;
+  text-align: left;
+  user-select: none; // prevents selection highlighting
+
+  &:focus {
+    outline: none;
+  }
+
+  ${(props) =>
+    props.isEnabled
+      ? css`
+          cursor: pointer;
+          color: ${(p) => p.theme.textPrimaryColor};
+          &:hover {
+            background-color: ${(p) => p.theme.backgroundSecondaryColorMuted};
+          }
+        `
+      : css`
+          cursor: default;
+          color: ${(p) => p.theme.backgroundSecondaryColorMuted};
+        `}
+`;
diff --git a/src/components/Tab/Tab.scss b/src/components/Tab/Tab.scss