feat: update snippet button and modal

increased the size of the snippet modal, added a bit more responsitivity too removed the gray filter on the snippet button
dostonnabotov · Jan 3, 2025 · 2b6dd3b · 2b6dd3b
1 parent dd2b5b0
commit 2b6dd3b
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 33 deletions.
diff --git a/src/components/CodePreview.tsx b/src/components/CodePreview.tsx
@@ -40,7 +40,7 @@ const CodePreview = ({ language = "markdown", code }: Props) => {
         language={language}
         style={theme === "dark" ? oneDark : oneLight}
         wrapLines={true}
-        customStyle={{ margin: "0", maxHeight: "20rem" }}
+        customStyle={{ margin: "0", maxHeight: "32rem" }}
       >
         {code}
       </SyntaxHighlighter>

diff --git a/src/components/SnippetModal.tsx b/src/components/SnippetModal.tsx
@@ -58,29 +58,31 @@ const SnippetModal: React.FC<Props> = ({
             <CloseIcon />
           </Button>
         </div>
-        <CodePreview language={slugify(language)} code={snippet.code} />
-        <p>
-          <b>Description: </b>
-          {snippet.description}
-        </p>
-        <p>
-          Contributed by{" "}
-          <a
-            href={`https://github.com/${snippet.author}`}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="styled-link"
-          >
-            @{snippet.author}
-          </a>
-        </p>
-        <ul role="list" className="modal__tags">
-          {snippet.tags.map((tag) => (
-            <li key={tag} className="modal__tag">
-              {tag}
-            </li>
-          ))}
-        </ul>
+        <div className="modal__body | flow">
+          <CodePreview language={slugify(language)} code={snippet.code} />
+          <p>
+            <b>Description: </b>
+            {snippet.description}
+          </p>
+          <p>
+            Contributed by{" "}
+            <a
+              href={`https://github.com/${snippet.author}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="styled-link"
+            >
+              @{snippet.author}
+            </a>
+          </p>
+          <ul role="list" className="modal__tags">
+            {snippet.tags.map((tag) => (
+              <li key={tag} className="modal__tag">
+                {tag}
+              </li>
+            ))}
+          </ul>
+        </div>
       </motion.div>
     </motion.div>,
     modalRoot

diff --git a/src/styles/main.css b/src/styles/main.css
@@ -550,22 +550,19 @@ abbr {
   border-radius: var(--br-lg);
   padding: 0.75em;
   text-align: start;
-  filter: grayscale(100%);
 
   &:is(:hover, :focus-visible) {
-    outline: 3px solid var(--clr-border-primary);
-    filter: grayscale(0);
+    outline: 2px solid var(--clr-border-primary);
   }
 }
 
 .snippet__preview {
   width: 100%;
   overflow: hidden;
-  aspect-ratio: 10 / 3;
+  aspect-ratio: 9 / 3;
   background-color: var(--clr-bg-secondary);
   /* background-image: var(--gradient-secondary); */
   border: 1px solid var(--clr-border-primary);
-  border-radius: var(--br-md);
   position: relative;
   padding-inline: 1em;
   display: grid;
@@ -599,20 +596,33 @@ body:has(.modal-overlay) {
 
 .modal {
   background-color: var(--clr-bg-secondary);
-  padding: 2rem;
-  width: 90%;
-  max-width: 800px;
+  width: fit-content;
+  max-width: 1000px;
+  max-height: 90%;
   border-radius: var(--br-lg);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  gap: 0;
   position: relative;
-  gap: 1rem;
+  overflow: auto;
 }
 
 .modal__header {
+  z-index: 50;
   display: flex;
+  position: sticky;
+  top: 0;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
+  padding: 1rem 1.5rem;
+  background-color: var(--clr-bg-secondary);
+  border-radius: var(--br-lg);
+}
+
+.modal__body {
+  padding: 1.5rem;
+  padding-top: 0;
+  gap: 1rem;
 }
 
 .code-preview {