fix: Feedback redesign

Author: Holybasil

src/components/PageContent/Feedback.tsx

@@ -36,6 +36,13 @@ export const Feedback = () => {
       return
     }
     setRating(selectedNumber + 1)
+    setTimeout(() => {
+      const scollElement = document.querySelector(".sidebar-nav-inner")
+      scollElement.scrollTo({
+        top: scollElement.scrollHeight,
+        behavior: "smooth",
+      })
+    }, 0)
     setIsSent(false)
     const path = "https://hviedclg.api.lncldglobal.com/1.1/classes/Feedback"
     const data = {
@@ -91,6 +98,7 @@ export const Feedback = () => {
             style={{
               cursor: "pointer",
               marginRight: "10px",
+              fontSize: 0,
             }}
           >
             {rating >= i + 1 ? star : starOutline}
@@ -99,41 +107,44 @@ export const Feedback = () => {
       </div>
       {!!rating && (
         <section
-          className="card"
           style={{
-            marginTop: "30px",
+            marginTop: "16px",
           }}
         >
           {isSent ? (
-            <div style={{ color: "#FFF8F3", fontSize: "1rem", lineHeight: "normal" }}>
+            <div className="text-dark dark:text-white" style={{ fontSize: "1rem", lineHeight: "normal" }}>
               We appreciate your feedback! 🤎
             </div>
           ) : (
             <form
+              className="feedback-form"
               onSubmit={handleSubmit}
-              style={{ display: "flex", flexDirection: "column", gap: "0.3rem", marginBottom: "6px" }}
+              style={{ display: "flex", flexDirection: "column" }}
             >
               <label
                 htmlFor="name"
-                style={{ color: "#FFF8F3", fontSize: "1rem", lineHeight: "normal", marginBottom: "20px" }}
+                className="text-dark dark:text-white"
+                style={{ fontSize: "1rem", lineHeight: "normal", marginBottom: "16px" }}
               >
                 Tell us more about your experience.
               </label>
-              <div style={{ borderRadius: "10px", overflow: "hidden", display: "flex", flexDirection: "column" }}>
+              <div style={{ display: "flex", flexDirection: "column" }}>
                 <textarea
                   name="msg"
                   rows="4"
+                  className="text-black dark:text-white border-black dark:border-white bg-pure-white dark:bg-black"
                   style={{
-                    borderWidth: " 0",
                     padding: "15px",
                     caretColor: "#C4C4C4",
                     outline: "none",
                     fontSize: "1rem",
+                    borderRadius: "10px",
+                    marginBottom: "16px",
                   }}
                 />
                 <button
                   className={button.primary}
-                  style={{ borderRadius: 0, borderWidth: " 0", background: "var(--orange-400)" }}
+                  style={{ borderRadius: "5px", borderWidth: " 0", background: "var(--orange-400)" }}
                   disabled={isSubmitting}
                 >
                   submit

src/components/RightSidebar/RightSidebar.astro

@@ -16,7 +16,7 @@ const { content, githubEditUrl, headings, clientSideToc } = Astro.props
     </div>
 
     <div>
-      <h2 class="heading feedback-title">{t("rightSidebar.feedback")}</h2>
+      <h2 class="heading">{t("rightSidebar.feedback")}</h2>
       <div class="feedback-wrapper">
         <Feedback client:idle />
       </div>
@@ -37,8 +37,8 @@ const { content, githubEditUrl, headings, clientSideToc } = Astro.props
     @apply !mb-6;
   }
   .sidebar-nav-inner {
-    padding: 16px 20px 70px 4px;
-    overflow: auto;
+    padding: 24px 20px 24px 4px;
+    overflow-y: scroll;
     background: #fff8f3;
     border-radius: 1em;
     float: right;
@@ -48,13 +48,9 @@ const { content, githubEditUrl, headings, clientSideToc } = Astro.props
     @apply bg-white dark:bg-dark-normal;
   }
   .sidebar-nav-inner > * {
-    margin-top: 1rem;
+    margin-top: 32px;
   }
   .sidebar-nav-inner > *:first-child {
     margin-top: 0;
   }
-
-  .sidebar-nav-inner h2 {
-    @apply m-0 mt-4;
-  }
 </style>

src/styles/index.css

@@ -100,7 +100,10 @@ article > section nav {
 
 article > section ::marker {
   font-weight: bold;
-  @apply text-light;
+  @apply text-marker;
+}
+.dark article > section ::marker {
+  @apply text-dark-marker;
 }
 
 article > section iframe {
@@ -171,15 +174,12 @@ strong {
   margin: 0.125em;
   border-radius: var(--border-radius);
   word-break: break-word;
-  background: var(--gray-200);
-  color: var(--black-100);
-  @apply font-mono;
+  @apply font-mono text-code bg-code dark:text-dark-code dark:bg-dark-code;
 }
 
 a > code {
   position: relative;
-  color: #ff684b;
-  background: #ffe7e2;
+  @apply text-link-code dark:text-link-code bg-link-code dark:bg-link-dark-code;
 }
 
 pre.astro-code > code {
@@ -293,7 +293,7 @@ h2.heading {
   font-weight: 700 !important;
   padding: 0.1rem 0rem;
   /* margin-top: 30px; */
-  margin-bottom: 20px;
+  margin-bottom: 16px;
   font-family: var(--font-family-body-text);
 }
 

tailwind.config.cjs

@@ -28,13 +28,17 @@ module.exports = {
         highlight: "#FFDEB5",
         "dark-highlight": "#3b3b3b",
         "callout-note": "#FFF8F3",
-        "callout-dark-note": "#262626",
+        "callout-dark-note": "#2E261C",
         "callout-caution": "#F8F5E0",
         "callout-dark-caution": "#5D4C38",
         "callout-danger": "#FFE4DF",
         "callout-dark-danger": "#662A1E",
         "callout-tip": "#EEEEEE",
-        "callout-dark-tip": "#3A635E",
+        "callout-dark-tip": "#3B3B3B",
+        "link-code": "#ffe7e2",
+        "link-dark-code": "#33150F",
+        code: "#dadada",
+        "dark-code": "#5B5B5B",
       },
       borderColor: {
         primary: "#dadada",
@@ -185,6 +189,13 @@ module.exports = {
       fontSize: {
         base: ["16px", "28px"],
       },
+      textColor: {
+        "link-code": "#ff684b",
+        code: "#101010",
+        "dark-code": "#fff",
+        marker: "#586474",
+        "dark-marker": "#FFF8F3",
+      },
       height: {
         navbar: "var(--theme-navbar-height)",
       },