fix: �change theme icons

텍스트(아이콘)의 경우, 사파리에서 텍스트가 작다고 느껴지면 알아서 크기를 키움.. 그래서 UI가 깨짐
syoung125 · May 29, 2024 · 313dc09 · 313dc09
1 parent c454ea4
commit 313dc09
Show file tree

Hide file tree

Showing 4 changed files with 192 additions and 8 deletions.
diff --git a/src/assets/icons/Moon.tsx b/src/assets/icons/Moon.tsx
@@ -0,0 +1,129 @@
+import { IconProps } from ".";
+
+export const Moon = ({ style }: IconProps) => {
+  return (
+    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" style={style}>
+      <g id="color">
+        <circle
+          cx="36"
+          cy="36"
+          r="28"
+          fill="#fcea2b"
+          stroke="#fcea2b"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+        />
+        <path
+          fill="#f1b31c"
+          stroke-miterlimit="10"
+          stroke-width="0.204"
+          opacity="0.4"
+          d="M29,62c20.0033,0,16.6634-52,16.6634-52s24.9582,7,16.6388,35S13.4011,62,29,62Z"
+        />
+        <circle cx="26.5" cy="27.5" r="5" fill="#fff" stroke="none" />
+        <circle cx="45.5" cy="27.5" r="5" fill="#fff" stroke="none" />
+      </g>
+      <g id="line">
+        <rect
+          x="34"
+          y="37"
+          width="4"
+          height="2"
+          stroke="#000"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="0.25"
+        />
+        <path
+          fill="none"
+          stroke="#000"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M36,64A28,28,0,0,1,36,8"
+        />
+        <path
+          fill="none"
+          stroke="#000"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M36,8a28,28,0,0,1,0,56"
+        />
+        <path
+          fill="none"
+          stroke="#000"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M36,39.5c1.1046,0,2.5-.8954,2.5-2H34A2,2,0,0,0,36,39.5Z"
+        />
+        <path
+          fill="none"
+          stroke="#000"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="m26.92 45.92s3.705 3.389 9.652 3.771c6.942 0.3136 10.42-3.695 10.42-3.695"
+        />
+        <circle
+          cx="26.5"
+          cy="27.5"
+          r="5"
+          fill="none"
+          stroke="#000"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+        />
+        <circle
+          cx="45.5"
+          cy="27.5"
+          r="5"
+          fill="none"
+          stroke="#000"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+        />
+        <circle
+          cx="45.5"
+          cy="27.5"
+          r="5"
+          fill="none"
+          stroke="#000"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <circle
+          cx="43.45"
+          cy="27.75"
+          r="1.75"
+          stroke="#000"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+        />
+        <circle
+          cx="26.5"
+          cy="27.5"
+          r="5"
+          fill="none"
+          stroke="#000"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <circle
+          cx="24.25"
+          cy="27.75"
+          r="1.75"
+          stroke="#000"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+        />
+      </g>
+    </svg>
+  );
+};
diff --git a/src/assets/icons/Sun.tsx b/src/assets/icons/Sun.tsx
@@ -0,0 +1,58 @@
+import { IconProps } from ".";
+
+export const Sun = ({ style }: IconProps) => {
+  return (
+    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" style={style}>
+      <g id="color">
+        <polygon
+          fill="#FCEA2B"
+          stroke="none"
+          points="36,10 31.4483,4.3216 28.6708,11.0465 22.7014,6.8864 21.9435,14.1231 15.0427,11.817 16.3488,18.9749 9.0779,18.6961 12.3422,25.1984 5.2887,26.9833 10.2616,32.295 4,36 10.2616,39.7051 5.2889,45.0172 12.3426,46.8026 9.0787,53.3052 16.3497,53.0261 15.044,60.1842 21.9445,57.8775 22.7026,65.1141 28.6713,60.9536 31.4484,67.6784 36,62 40.5517,67.6784 43.3292,60.9535 49.2986,65.1135 50.0565,57.8769 56.9573,60.183 55.6512,53.0251 62.9221,53.3039 59.6578,46.8016 66.7113,45.0167 61.7384,39.705 68,36 61.7384,32.2949 66.7111,26.9828 59.6573,25.1974 62.9213,18.6948 55.6503,18.9739 56.956,11.8158 50.0555,14.1225 49.2974,6.8859 43.3287,11.0464 40.5516,4.3216"
+        />
+      </g>
+      <g id="hair" />
+      <g id="skin" />
+      <g id="skin-shadow" />
+      <g id="line">
+        <polygon
+          fill="none"
+          stroke="#000000"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-miterlimit="10"
+          stroke-width="2"
+          points="36,10 31.4483,4.3216 28.6708,11.0465 22.7014,6.8864 21.9435,14.1231 15.0427,11.817 16.3488,18.9749 9.0779,18.6961 12.3422,25.1984 5.2887,26.9833 10.2616,32.295 4,36 10.2616,39.7051 5.2889,45.0172 12.3426,46.8026 9.0787,53.3052 16.3497,53.0261 15.044,60.1842 21.9445,57.8775 22.7026,65.1141 28.6713,60.9536 31.4484,67.6784 36,62 40.5517,67.6784 43.3292,60.9535 49.2986,65.1135 50.0565,57.8769 56.9573,60.183 55.6512,53.0251 62.9221,53.3039 59.6578,46.8016 66.7113,45.0167 61.7384,39.705 68,36 61.7384,32.2949 66.7111,26.9828 59.6573,25.1974 62.9213,18.6948 55.6503,18.9739 56.956,11.8158 50.0555,14.1225 49.2974,6.8859 43.3287,11.0464 40.5516,4.3216"
+        />
+        <circle cx="27.8456" cy="33.789" r="3" fill="#000000" stroke="none" />
+        <circle cx="44.1544" cy="33.789" r="3" fill="#000000" stroke="none" />
+        <path
+          fill="none"
+          stroke="#000000"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-miterlimit="10"
+          stroke-width="2"
+          d="M43.6763,46.3816c-2.1347,1.5846-4.8139,2.5518-7.6766,2.5518c-2.9019,0-5.5262-0.9282-7.6759-2.5523"
+        />
+        <path
+          fill="none"
+          stroke="#000000"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-miterlimit="10"
+          stroke-width="2"
+          d="M31.7748,23.0042c0,0-4.7748-2.6003-9.5496,1.6523"
+        />
+        <path
+          fill="none"
+          stroke="#000000"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-miterlimit="10"
+          stroke-width="2"
+          d="M40.2252,23.0042c0,0,4.7748-2.6003,9.5496,1.6523"
+        />
+      </g>
+    </svg>
+  );
+};
diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts
@@ -20,3 +20,5 @@ export { default as RunAndDebugIcon } from "./run-n-debug";
 export { default as SearchIcon } from "./search";
 export { default as SettingsGearIcon } from "./settings-gear";
 export { default as SourceControlIcon } from "./source-control";
+export { Moon } from "./Moon";
+export { Sun } from "./Sun";
diff --git a/src/components/common/theme-switcher/index.tsx b/src/components/common/theme-switcher/index.tsx
@@ -4,6 +4,7 @@ import styled from "styled-components";
 
 import { BLACK, WHITE } from "@src/constants/palette";
 import { useThemeContext } from "@src/contexts/theme";
+import { Moon, Sun } from "@src/assets/icons";
 
 export default function ThemeSwitcher() {
   const {
@@ -23,8 +24,8 @@ export default function ThemeSwitcher() {
 
   return (
     <Wrapper tabIndex={0} onClick={handleClick} onKeyDown={handleKeyDown}>
-      <span>🌝</span>
-      <span>🌞</span>
+      <Moon />
+      <Sun />
       <Circle mode={theme} />
     </Wrapper>
   );
@@ -43,12 +44,6 @@ const Wrapper = styled.div`
   border-radius: 0.6rem;
 
   background-color: ${BLACK};
-
-  outline: 2px solid ${BLACK};
-
-  &:focus-visible {
-    outline: 2px solid ${WHITE};
-  }
 `;
 
 const Circle = styled.div<{ mode: "light" | "dark" }>`