Style patch aggre (#2732)

* style tweaking * tweaking
dev-protocol · Aug 15, 2024 · 674012b · 674012b
1 parent e487f2a
commit 674012b
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 26 deletions.
diff --git a/src/components/PublishConfirm/PublishConfirm.svelte b/src/components/PublishConfirm/PublishConfirm.svelte
@@ -340,7 +340,7 @@
 </script>
 
 <div
-  class="relative flex gap-16 flex-col justify-center p-4 md:p-0 w-[36%] max-w-[36%] ml-auto mr-auto"
+  class="relative flex gap-16 flex-col justify-center p-4 md:p-0 max-w-screen-sm container mx-auto"
 >
   <!-- Hero Header -->
   <section class="mt-16 grid gap-8 md:mt-32 min-w-full w-full max-w-full">
@@ -350,39 +350,43 @@
   </section>
 
   <!-- Core inputs -->
-  <section class="grid gap-16 w-full max-w-full mb-16 md:mb-32">
+  <section class="grid gap-8 md:gap-16 w-full max-w-full mb-16 md:mb-32">
     <!-- Clubs name -->
-    <div class="hs-form-field is-filled !gap-4">
-      <span class="hs-form-field__label !text-[#C4C4C4]"
+    <div class="hs-form-field is-filled">
+      <span class="hs-form-field__label !text-accent-400"
         >{i18n('ClubNameLabel')}</span
       >
-      <p class="font-body font-bold text-[32px] !text-[#C4C4C4]">{clubsName}</p>
+      <p class="font-body font-bold text-[32px] !text-accent-400">
+        {clubsName}
+      </p>
     </div>
 
     <!-- Token name -->
-    <div class="hs-form-field is-filled !gap-4">
-      <span class="hs-form-field__label !text-[#C4C4C4]"
+    <div class="hs-form-field is-filled">
+      <span class="hs-form-field__label !text-accent-400"
         >{i18n('TokenNameLabel')}</span
       >
-      <p class="font-body font-bold text-[32px] !text-[#C4C4C4]">{tokenName}</p>
+      <p class="font-body font-bold text-[32px] !text-accent-400">
+        {tokenName}
+      </p>
     </div>
 
     <!-- Token symbol -->
-    <div class="hs-form-field is-filled !gap-4">
-      <span class="hs-form-field__label !text-[#C4C4C4]"
+    <div class="hs-form-field is-filled">
+      <span class="hs-form-field__label !text-accent-400"
         >{i18n('TokenSymbolLabel')}</span
       >
-      <p class="font-body font-bold text-[32px] !text-[#C4C4C4]">
+      <p class="font-body font-bold text-[32px] !text-accent-400">
         {tokenSymbol}
       </p>
     </div>
 
     <!-- Token supply -->
-    <div class="hs-form-field is-filled !gap-4">
-      <p class="font-body font-bold text-[32px] !text-[#C4C4C4]">
+    <div class="hs-form-field is-filled">
+      <p class="font-body font-bold text-[32px] !text-accent-400">
         10,000,000 {tokenSymbol}
       </p>
-      <span class="hs-form-field__label !text-[#C4C4C4]"
+      <span class="hs-form-field__label !text-accent-400"
         >{i18n('TokenSupply')}</span
       >
     </div>

diff --git a/src/components/PublishForm/PublishForm.tsx b/src/components/PublishForm/PublishForm.tsx
@@ -98,7 +98,7 @@ const PublishForm = (props: IPublishFormProps) => {
 
   return (
     <>
-      <div className="relative flex gap-16 flex-col justify-center p-4 md:p-0 w-[36%] max-w-[36%] ml-auto mr-auto">
+      <div className="relative flex gap-16 flex-col justify-center p-4 md:p-0 max-w-screen-sm	container mx-auto">
         <section className="mt-16 grid gap-8 md:mt-32 min-w-full w-full max-w-full">
           <h1 className="text-2xl font-bold md:text-5xl text-center">
             {i18n('Header')}
@@ -129,21 +129,21 @@ const PublishForm = (props: IPublishFormProps) => {
               {' '}
               {i18n('VerifyYouLabel')}{' '}
             </span>
-            <div className="flex w-full max-w-full h-28 max-h-[28] items-center justify-start gap-2">
-              <GithubMarketButton
-                domain={props.domain}
+            <div className="grid grid-cols-3 w-full max-w-full h-28 max-h-[28] items-center justify-start gap-2">
+              <YoutubeMarketButton
                 market={market}
                 changeMarket={setMarket}
+                domain={props.domain}
               />
               <DiscordMarketButton
                 market={market}
                 changeMarket={setMarket}
                 domain={props.domain}
               />
-              <YoutubeMarketButton
+              <GithubMarketButton
+                domain={props.domain}
                 market={market}
                 changeMarket={setMarket}
-                domain={props.domain}
               />
             </div>
             <p

diff --git a/src/components/PublishMarketForm/Discord/Discord.tsx b/src/components/PublishMarketForm/Discord/Discord.tsx
@@ -34,7 +34,7 @@ const DiscordMarketButton = (props: IDiscordButtonProps) => {
   return (
     <button
       onClick={onAuthDiscordAccount}
-      className={`hs-button is-large is-filled flex flex-col max-w-[33%] grow items-center justify-center gap-2.5 ${
+      className={`hs-button is-large is-filled flex flex-col items-center justify-center gap-2.5 text-surface-ink border-surface-200 bg-surface-300 hover:bg-surface-400 ${
         props.market !== Market.DISCORD && 'opacity-50'
       } self-stretch justify-self-stretch h-full max-h-full min-h-full`}
       id="discord-icon"
@@ -50,7 +50,7 @@ const DiscordMarketButton = (props: IDiscordButtonProps) => {
         >
           <path
             d="M23.256 2.40814C21.5074 1.58851 19.6573 1.0056 17.7547 0.674805C17.4949 1.15145 17.2595 1.64097 17.0493 2.14147C15.0286 1.83347 12.9728 1.83347 10.952 2.14147C10.7402 1.64036 10.5021 1.15079 10.2387 0.674805C8.33457 1.00485 6.48308 1.58778 4.73334 2.40814C1.65283 6.97278 0.297293 12.4847 0.909342 17.9575C2.89858 19.4611 5.13919 20.5992 7.52668 21.3188C8.07334 20.5668 8.55734 19.7721 8.97201 18.9388C8.18234 18.6384 7.42109 18.268 6.69734 17.8321C6.88801 17.6908 7.07468 17.5428 7.25468 17.3908C9.35904 18.4038 11.6645 18.9298 14 18.9298C16.3355 18.9298 18.641 18.4038 20.7453 17.3908C20.928 17.5428 21.1147 17.6908 21.3027 17.8321C20.5773 18.2695 19.8147 18.6401 19.0227 18.9415C19.4377 19.7735 19.9211 20.5696 20.468 21.3215C22.9025 20.5689 25.1873 19.398 27.22 17.8615C27.7804 12.4027 26.3748 6.92311 23.256 2.40814ZM9.57068 14.7508C8.8926 14.7028 8.26067 14.3899 7.81154 13.8796C7.36241 13.3694 7.13219 12.7028 7.17068 12.0241C7.12791 11.3442 7.35656 10.675 7.80646 10.1633C8.25637 9.6517 8.89082 9.33935 9.57068 9.2948C9.90805 9.31479 10.2381 9.40145 10.5418 9.54977C10.8455 9.6981 11.1167 9.90514 11.3399 10.1589C11.5631 10.4127 11.7337 10.7082 11.842 11.0284C11.9503 11.3485 11.994 11.687 11.9707 12.0241C12.0131 12.7038 11.7842 13.3724 11.3343 13.8836C10.8844 14.3947 10.2502 14.7066 9.57068 14.7508ZM18.4293 14.7508C17.7513 14.7028 17.1193 14.3899 16.6702 13.8796C16.2211 13.3694 15.9909 12.7028 16.0293 12.0241C15.9866 11.3442 16.2152 10.675 16.6651 10.1633C17.115 9.6517 17.7495 9.33935 18.4293 9.2948C18.7667 9.31497 19.0966 9.40174 19.4002 9.55012C19.7038 9.6985 19.975 9.90555 20.1981 10.1593C20.4213 10.4131 20.5919 10.7085 20.7003 11.0286C20.8086 11.3487 20.8525 11.687 20.8293 12.0241C20.8714 12.7037 20.6424 13.3722 20.1926 13.8832C19.7427 14.3943 19.1087 14.7062 18.4293 14.7508Z"
-            fill="white"
+            fill="currentColor"
           />
         </svg>
       </span>

diff --git a/src/components/PublishMarketForm/Github/Github.tsx b/src/components/PublishMarketForm/Github/Github.tsx
@@ -28,7 +28,7 @@ const GithubButtonProps = (props: IGithubButtonProps) => {
   return (
     <button
       onClick={onClickGithub}
-      className={`hs-button is-large is-filled flex flex-col max-w-[33%] grow items-center justify-center gap-2.5 ${
+      className={`hs-button is-large is-filled flex flex-col items-center justify-center gap-2.5 text-surface-ink border-surface-200 bg-surface-300 hover:bg-surface-400 ${
         props.market !== Market.GITHUB && 'opacity-50'
       } self-stretch justify-self-stretch h-full max-h-full min-h-full`}
       id="github-icon"
@@ -46,7 +46,7 @@ const GithubButtonProps = (props: IGithubButtonProps) => {
             fill-rule="evenodd"
             clip-rule="evenodd"
             d="M16.341 2.6665C13.1603 2.66794 10.0882 3.82398 7.69567 5.91984C5.26986 8.04689 3.66859 10.9587 3.17167 14.1465C2.66377 17.3477 3.28453 20.6259 4.92767 23.4198C6.54676 26.1806 9.10094 28.2703 12.1277 29.3105C12.7997 29.4372 13.0383 29.0132 13.0383 28.6518C13.0383 28.3252 13.025 27.2492 13.0197 26.1078C9.31301 26.9345 8.53167 24.4945 8.53167 24.4945C8.29055 23.6737 7.76613 22.965 7.05167 22.4945C5.84234 21.6452 7.14501 21.6665 7.14501 21.6665C7.56767 21.7252 7.97167 21.8838 8.32501 22.1278C8.67967 22.3718 8.97434 22.6958 9.18767 23.0745C9.36767 23.4118 9.61167 23.7092 9.90501 23.9478C10.3418 24.3093 10.8789 24.5282 11.444 24.5749C12.009 24.6217 12.5748 24.494 13.065 24.2092C13.125 23.5158 13.425 22.8678 13.9117 22.3825C10.953 22.0372 7.83967 20.8652 7.83967 15.6225C7.81932 14.2707 8.31031 12.9611 9.21434 11.9558C8.80634 10.776 8.85196 9.48655 9.34234 8.3385C9.34234 8.3385 10.461 7.97184 13.0077 9.7385C15.1895 9.1262 17.4978 9.1262 19.6797 9.7385C22.221 7.97184 23.333 8.3385 23.333 8.3385C23.8263 9.4825 23.8743 10.7758 23.4677 11.9558C24.3713 12.9611 24.8614 14.2709 24.8397 15.6225C24.8397 20.8745 21.721 22.0292 18.7543 22.3665C19.0745 22.7008 19.3205 23.0989 19.4765 23.5347C19.6325 23.9705 19.6949 24.4343 19.6597 24.8958C19.6597 26.7252 19.6437 28.1985 19.6437 28.6478C19.6437 29.0105 19.8837 29.4372 20.5597 29.3038C23.5808 28.2588 26.1288 26.1681 27.7437 23.4092C29.3836 20.6175 30.0024 17.3427 29.4943 14.1452C28.997 10.9603 27.3973 8.05116 24.9743 5.92517C22.586 3.8304 19.5192 2.67264 16.3423 2.6665H16.341Z"
-            fill="white"
+            fill="currentColor"
           />
         </svg>
       </span>

diff --git a/src/components/PublishMarketForm/Youtube/Youtube.tsx b/src/components/PublishMarketForm/Youtube/Youtube.tsx
@@ -33,7 +33,7 @@ const YoutubeMarketButton = (props: IYoutubeButtonProps) => {
   return (
     <button
       onClick={onAuthYoutubeAccount}
-      className={`hs-button is-large is-filled flex flex-col max-w-[33%] grow items-center justify-center gap-2.5 ${
+      className={`hs-button is-large is-filled flex flex-col items-center justify-center gap-2.5 text-surface-ink border-surface-200 bg-surface-300 hover:bg-surface-400 ${
         props.market !== Market.YOUTUBE && 'opacity-50'
       } self-stretch justify-self-stretch h-full max-h-full min-h-full`}
       id="youtube-icon"
@@ -51,7 +51,7 @@ const YoutubeMarketButton = (props: IYoutubeButtonProps) => {
             fill-rule="evenodd"
             clip-rule="evenodd"
             d="M26.5996 4.71591C26.4749 3.76842 26.113 2.86774 25.5476 2.09725C24.847 1.39144 23.8968 0.989617 22.9023 0.978581C19.213 0.711914 13.6676 0.711914 13.6676 0.711914C13.6676 0.711914 8.12497 0.711914 4.43031 0.978581C3.43619 0.989393 2.48631 1.39128 1.78631 2.09725C1.21845 2.86699 0.855955 3.76865 0.732975 4.71725C0.568181 6.13638 0.479165 7.5633 0.466309 8.99191V10.9919C0.479099 12.4205 0.568115 13.8474 0.732975 15.2666C0.858309 16.2159 1.21831 17.1199 1.77831 17.8959C2.58364 18.6106 3.61831 19.0119 4.69431 19.0266C6.80498 19.2279 13.669 19.2932 13.669 19.2932C13.669 19.2932 19.217 19.2932 22.9063 19.0266C23.9013 19.015 24.8519 18.6127 25.553 17.9066C26.1171 17.1352 26.478 16.2341 26.6023 15.2866C26.7672 13.8674 26.8562 12.4405 26.869 11.0119V8.99058C26.8539 7.56196 26.764 6.13512 26.5996 4.71591ZM11.0103 13.4546V5.96125L18.2103 9.71991L11.0103 13.4546Z"
-            fill="white"
+            fill="currentColor"
           />
         </svg>
       </span>