update components style

Author: zzq0826

src/components/Footer/Subscribe/Subscribe.module.css

@@ -1,5 +1,5 @@
 .container {
-  @apply py-[60px] px-[20px] bg-[#ffd0c7] md:px-[32px];
+  @apply py-[60px] px-[20px] bg-[#EAF5FD] md:py-[32px];
 }
 
 .subscribeBox {

src/components/Footer/Subscribe/Subscribe.tsx

@@ -41,7 +41,7 @@ export default function Subscribe() {
       <div className={styles.subscribeBox}>
         <img className={styles.subscribeIcon} src="/images/footer/subscribe.svg" />
         <div className={styles.copyBox}>
-          <div className={styles.subscribeTitle}>Contribute and join our survey</div>
+          <div className={styles.subscribeTitle}>Stay up-to-date on the latest Scroll Developer news</div>
           <div className={styles.subscribeText}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
         </div>
         <MailchimpSubscribe

src/components/Footer/helper.tsx

@@ -6,11 +6,9 @@ const DiscordIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
   </svg>
 )
 const GithubIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="17" height="11" viewBox="0 0 17 11" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-    <path d="M4.67948 10.0985C7.26334 10.0985 9.35798 8.0179 9.35798 5.45135C9.35798 2.8848 7.26334 0.804199 4.67948 0.804199C2.09561 0.804199 0.000976562 2.8848 0.000976562 5.45135C0.000976562 8.0179 2.09561 10.0985 4.67948 10.0985Z" />
-    <path d="M12.143 9.8539C13.4372 9.8539 14.4864 7.88271 14.4864 5.45112C14.4864 3.01953 13.4372 1.04834 12.143 1.04834C10.8487 1.04834 9.79956 3.01953 9.79956 5.45112C9.79956 7.88271 10.8487 9.8539 12.143 9.8539Z" />
-    <path d="M15.7629 9.39826C16.2165 9.39826 16.5843 7.63105 16.5843 5.45108C16.5843 3.27112 16.2165 1.50391 15.7629 1.50391C15.3092 1.50391 14.9414 3.27112 14.9414 5.45108C14.9414 7.63105 15.3092 9.39826 15.7629 9.39826Z" />
-  </svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="17" viewBox="0 0 18 17" fill="currentColor">
+  <path d="M8.81364 0C4.1173 0 0.313477 3.90255 0.313477 8.71559C0.313477 12.5672 2.74864 15.8333 6.12546 16.9849C6.55047 17.0671 6.7062 16.7972 6.7062 16.5657C6.7062 16.3589 6.69923 15.8104 6.69557 15.0839C4.33113 15.6095 3.83241 13.9146 3.83241 13.9146C3.44559 12.9088 2.88677 12.6396 2.88677 12.6396C2.11677 12.0995 2.9462 12.1106 2.9462 12.1106C3.79987 12.1712 4.24812 13.0086 4.24812 13.0086C5.00617 14.3411 6.23803 13.9562 6.7238 13.7337C6.80017 13.1697 7.01931 12.7862 7.26203 12.5683C5.3744 12.3503 3.39014 11.6006 3.39014 8.26138C3.39014 7.31 3.71952 6.53254 4.26506 5.92277C4.16943 5.70242 3.88255 4.81617 4.33943 3.61602C4.33943 3.61602 5.05132 3.38251 6.67698 4.50955C7.35699 4.31588 8.07951 4.21991 8.80202 4.2154C9.52454 4.21991 10.247 4.31588 10.9271 4.50955C12.5421 3.38251 13.254 3.61602 13.254 3.61602C13.7109 4.81651 13.424 5.70242 13.339 5.92277C13.8809 6.53254 14.2103 7.31 14.2103 8.26138C14.2103 11.6096 12.2233 12.3465 10.3321 12.561C10.6296 12.8226 10.9058 13.3571 10.9058 14.1738C10.9058 15.3399 10.8952 16.2771 10.8952 16.5605C10.8952 16.7888 11.0439 17.0615 11.4796 16.9746C14.8803 15.8305 17.3135 12.562 17.3135 8.71629C17.3138 3.90255 13.508 0 8.81364 0Z" fill="currentColor"/>
+</svg>
 )
 const YoutubeIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
   <svg width="19" height="13" viewBox="0 0 19 13" fill="currentColor" xmlns="http://www.w3.org/2000/svg">

src/components/ToggleElement.astro

@@ -11,7 +11,7 @@ const anchorHash = anchor.replace(/\s+/g, "-")
     <div>
       <slot name="title" />
     </div>
-    <a href={`#${anchorHash}`} dir="auto" aria-label={anchor}> #</a>
+    <a href={`#${anchorHash}`} dir="auto" aria-label={anchor}></a>
   </summary>
   <div>
     <slot />
@@ -36,16 +36,16 @@ const anchorHash = anchor.replace(/\s+/g, "-")
 <style>
   details {
     margin-bottom: 1rem;
-    border: 1px solid #ccc;
-    border-radius: 4px;
+    border-radius: 27px;
+    border: 1px solid #dadada;
     overflow: hidden;
     color: var(--color-text-primary);
     font-weight: 600;
     padding-left: 0.3rem;
   }
 
   details:hover {
-    border-color: var(--color-text-link);
+    /* border-color: var(--color-text-link); */
   }
 
   summary {

src/styles/index.css

@@ -204,12 +204,27 @@ pre {
 
 table {
   width: 100%;
+  border-radius: 27px;
   padding: var(--padding-block) 0;
   margin: 0;
   border-collapse: collapse;
   background: #fff;
   line-height: 2;
-  @apply text-primary font-text border-[1px] border-solid border-border-primary;
+  @apply text-primary font-text border-none;
+  border-radius: 10px;
+  position: relative;
+}
+
+table::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  border-radius: 27px;
+  border: 1px solid #dadada;
 }
 
 table thead tr {
@@ -232,8 +247,9 @@ th {
 }
 td,
 th {
-  padding: 6px;
+  padding: 8px 30px;
   text-align: left;
+  font-size: 16px;
 }
 
 pre {
@@ -249,7 +265,9 @@ blockquote {
   padding: 1.25em 1.5rem;
   border-radius: 0 0.25rem 0.25rem 0;
   line-height: 1.7;
-  @apply border-0 border-l-[3px] border-solid border-light bg-bg-offset;
+  @apply border-0 border-l-[29px] border-solid border-[#FFF0DD];
+  border-radius: 27px;
+  background: #fff8f3;
 }
 
 img {