Updated ui and added favicon

technoph1le · Nov 22, 2024 · 15a4112 · 15a4112
1 parent ed7bce9
commit 15a4112
Show file tree

Hide file tree

Showing 15 changed files with 101 additions and 85 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,24 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/favicon/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="/favicon/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="/favicon/favicon-16x16.png"
+    />
+    <link rel="manifest" href="/site.webmanifest" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>QuickSnip</title>
   </head>

diff --git a/public/data/index.json b/public/data/index.json
@@ -1,3 +1,3 @@
 {
-  "languages": ["JavaScript", "Python"]
+  "languages": ["JavaScript", "Sass"]
 }
diff --git a/public/data/python.json b/public/data/python.json
diff --git a/public/data/sass.json b/public/data/sass.json
@@ -0,0 +1,35 @@
+[
+  {
+    "categoryName": "Typography",
+    "snippets": [
+      {
+        "title": "Line Clamp Mixin",
+        "description": "A Sass mixin to clamp text to a specific number of lines.",
+        "code": "@mixin line-clamp($number) {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: $number;\n  overflow: hidden;\n}",
+        "tags": ["sass", "mixin", "typography", "css"],
+        "author": "@technoph1le"
+      },
+      {
+        "title": "Text Overflow Ellipsis",
+        "description": "Ensures long text is truncated with an ellipsis.",
+        "code": "@mixin text-ellipsis {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}",
+        "tags": ["sass", "mixin", "text", "css"],
+        "author": "@technoph1le"
+      },
+      {
+        "title": "Font Import Helper",
+        "description": "Simplifies importing custom fonts in Sass.",
+        "code": "@mixin import-font($family, $weight: 400, $style: normal) {\n  @font-face {\n    font-family: #{$family};\n    font-weight: #{$weight};\n    font-style: #{$style};\n    src: url('/fonts/#{$family}-#{$weight}.woff2') format('woff2'),\n         url('/fonts/#{$family}-#{$weight}.woff') format('woff');\n  }\n}",
+        "tags": ["sass", "mixin", "fonts", "css"],
+        "author": "@technoph1le"
+      },
+      {
+        "title": "Text Gradient",
+        "description": "Adds a gradient color effect to text.",
+        "code": "@mixin text-gradient($from, $to) {\n  background: linear-gradient(to right, $from, $to);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}",
+        "tags": ["sass", "mixin", "gradient", "text", "css"],
+        "author": "@technoph1le"
+      }
+    ]
+  }
+]
diff --git a/public/favicon/android-chrome-192x192.png b/public/favicon/android-chrome-192x192.png
diff --git a/public/favicon/android-chrome-512x512.png b/public/favicon/android-chrome-512x512.png
diff --git a/public/favicon/apple-touch-icon.png b/public/favicon/apple-touch-icon.png
diff --git a/public/favicon/favicon-16x16.png b/public/favicon/favicon-16x16.png
diff --git a/public/favicon/favicon-32x32.png b/public/favicon/favicon-32x32.png
diff --git a/public/favicon/favicon.ico b/public/favicon/favicon.ico
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -0,0 +1,19 @@
+{
+  "name": "QuickSnip",
+  "short_name": "QuickSnip",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
diff --git a/src/components/CodePreview.tsx b/src/components/CodePreview.tsx
@@ -16,7 +16,7 @@ const CodePreview = ({ language, children }: CodePreviewProps) => {
       language={language}
       style={oneDark}
       wrapLines={true}
-      customStyle={{ background: "transparent" }}
+      customStyle={{ margin: "0" }}
     >
       {children}
     </SyntaxHighlighter>

diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx
@@ -1,5 +1,5 @@
 const DEFAULT_ICON_COLOR = "var(--clr-neutral-200)";
-const DEFAULT_GRADIENT_COLORS = ["var(--clr-accent)", "var(--clr-neutral-700)"];
+const ACCENT_ICON_COLOR = "var(--clr-accent)";
 
 export const LogoIcon = () => (
   <svg
@@ -141,10 +141,7 @@ export const CloseIcon = ({ fillColor = DEFAULT_ICON_COLOR }) => (
   </svg>
 );
 
-export const CopyIcon = ({
-  gradient_1 = DEFAULT_GRADIENT_COLORS[0],
-  gradient_2 = DEFAULT_GRADIENT_COLORS[1],
-}) => (
+export const CopyIcon = ({ fillColor = ACCENT_ICON_COLOR }) => (
   <svg
     width="20"
     height="20"
@@ -154,35 +151,11 @@ export const CopyIcon = ({
   >
     <path
       d="M12.7 1.66667H9.455C7.985 1.66667 6.82 1.66667 5.90917 1.79C4.97083 1.91667 4.21167 2.18333 3.61333 2.78417C3.01417 3.385 2.74833 4.1475 2.6225 5.08917C2.5 6.00417 2.5 7.17333 2.5 8.64917V13.5142C2.5 14.7708 3.26667 15.8475 4.35583 16.2992C4.3 15.5408 4.3 14.4783 4.3 13.5933V9.41833C4.3 8.35083 4.3 7.43 4.39833 6.69333C4.50417 5.90333 4.7425 5.14667 5.35417 4.5325C5.96583 3.91833 6.72 3.67917 7.50667 3.5725C8.24 3.47417 9.15667 3.47417 10.2208 3.47417H12.7792C13.8425 3.47417 14.7575 3.47417 15.4917 3.5725C15.2718 3.01108 14.8878 2.52895 14.3898 2.18899C13.8918 1.84902 13.303 1.66701 12.7 1.66667Z"
-      fill="url(#paint0_linear_34_108)"
+      fill={fillColor}
     />
     <path
-      d="M5.5 9.4975C5.5 7.22583 5.5 6.09 6.20333 5.38417C6.90583 4.67833 8.03667 4.67833 10.3 4.67833H12.7C14.9625 4.67833 16.0942 4.67833 16.7975 5.38417C17.5008 6.09 17.5 7.22583 17.5 9.4975V13.5142C17.5 15.7858 17.5 16.9217 16.7975 17.6275C16.0942 18.3333 14.9625 18.3333 12.7 18.3333H10.3C8.0375 18.3333 6.90583 18.3333 6.20333 17.6275C5.5 16.9217 5.5 15.7858 5.5 13.5142V9.4975Z"
-      fill="url(#paint1_linear_34_108)"
+      d="M5.5 9.4975C5.5 7.22583 5.5 6.09 6.20333 5.38416C6.90583 4.67833 8.03667 4.67833 10.3 4.67833H12.7C14.9625 4.67833 16.0942 4.67833 16.7975 5.38416C17.5008 6.09 17.5 7.22583 17.5 9.4975V13.5142C17.5 15.7858 17.5 16.9217 16.7975 17.6275C16.0942 18.3333 14.9625 18.3333 12.7 18.3333H10.3C8.0375 18.3333 6.90583 18.3333 6.20333 17.6275C5.5 16.9217 5.5 15.7858 5.5 13.5142V9.4975Z"
+      fill={fillColor}
     />
-    <defs>
-      <linearGradient
-        id="paint0_linear_34_108"
-        x1="2.5"
-        y1="8.81277"
-        x2="15.4917"
-        y2="8.81277"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stopColor={gradient_1} />
-        <stop offset="1" stopColor={gradient_2} />
-      </linearGradient>
-      <linearGradient
-        id="paint1_linear_34_108"
-        x1="5.5"
-        y1="11.3471"
-        x2="17.5"
-        y2="11.3471"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stopColor={gradient_1} />
-        <stop offset="1" stopColor={gradient_2} />
-      </linearGradient>
-    </defs>
   </svg>
 );
diff --git a/src/components/SnippetModal.tsx b/src/components/SnippetModal.tsx
@@ -3,7 +3,7 @@ import ReactDOM from "react-dom";
 import { useNavigate, useParams } from "react-router-dom";
 import { LanguageData, SnippetType } from "../types";
 import { getSnippetByTitleAndCategory } from "../utils/filters";
-import { CloseIcon } from "./Icons";
+import { CloseIcon, CopyIcon } from "./Icons";
 import Button from "./Button";
 import CodePreview from "./CodePreview";
 
@@ -52,6 +52,9 @@ const SnippetModal = () => {
           </Button>
         </div>
         <div className="code-preview">
+          <Button isIcon={true} className="modal__copy">
+            <CopyIcon />
+          </Button>
           <CodePreview language={language}>{snippet.code}</CodePreview>
         </div>
         <p>

diff --git a/src/styles/main.css b/src/styles/main.css
@@ -253,14 +253,6 @@ ol:where([role="list"]) {
   }
 }
 
-.code-preview {
-  border: 1px solid var(--border-color);
-  border-radius: var(--br-md);
-  width: 100%;
-  overflow-x: auto;
-  height: 100%;
-}
-
 /*------------------------------------*\
   #HEADER
 \*------------------------------------*/
@@ -371,7 +363,7 @@ ol:where([role="list"]) {
 .snippet__preview {
   width: 100%;
   overflow: hidden;
-  aspect-ratio: 16 / 9;
+  aspect-ratio: 10 / 3;
   background-image: var(--gradient-secondary);
   border: 1px solid var(--border-color);
   border-radius: var(--br-md);
@@ -434,6 +426,23 @@ ol:where([role="list"]) {
   gap: 1rem;
 }
 
+.code-preview {
+  border: 1px solid var(--border-color);
+  border-radius: var(--br-md);
+  width: 100%;
+  overflow-x: auto;
+  height: 100%;
+  position: relative;
+}
+
+.modal__copy {
+  position: absolute;
+  top: 0.5em;
+  right: 1em;
+  z-index: 10;
+  isolation: isolate;
+}
+
 .modal__tags {
   display: flex;
   gap: 1em;