feat(styleguide): add classes to color social shared buttons

nossas · Sep 26, 2023 · 94059ee · 94059ee
1 parent 0cd5ec4
commit 94059ee
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 7 deletions.
diff --git a/app/contrib/actions/pressure/templates/pressure/pressure_success.html b/app/contrib/actions/pressure/templates/pressure/pressure_success.html
@@ -2,26 +2,26 @@
   <h3 class="px-4 pt-4 text-lg font-bold text-center">Valeu, {{form_data.name}}! 🎉 <br/>Sua pressão foi enviada.</h3>
   <p class="py-4 text-center">Agora compartilhe nas redes para mais gente fazer parte desse movimento:</p>
   <div class="flex flex-col gap-4 justify-center pb-4">
-    <a class="w-full btn bg-[#71C16A] border-[#71C16A]" href="https://wa.me/?text={{ form_data.referrer_path }}" target="_blank">
+    <a class="w-full btn btn-whatsapp" href="https://wa.me/?text={{ form_data.referrer_path }}" target="_blank">
       <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M16.0002 7.79396C16.0002 12.0985 12.4839 15.5879 8.14553 15.5879C6.76826 15.5879 5.47438 15.2359 4.34868 14.6181L0 16L1.4178 11.8183C0.702587 10.6439 0.29067 9.26649 0.29067 7.79396C0.29067 3.48942 3.80734 0 8.14553 0C12.4842 0 16.0002 3.48942 16.0002 7.79396ZM8.14553 1.24124C4.50388 1.24124 1.54171 4.1808 1.54171 7.79396C1.54171 9.22773 2.00909 10.5556 2.79968 11.6357L1.9746 14.0693L4.51241 13.2628C5.55509 13.9474 6.80418 14.3467 8.1457 14.3467C11.7868 14.3467 14.7495 11.4075 14.7495 7.79431C14.7495 4.18116 11.787 1.24124 8.14553 1.24124ZM12.112 9.58898C12.0634 9.50951 11.9353 9.46151 11.7429 9.36604C11.5502 9.27058 10.6033 8.80818 10.4273 8.74471C10.2508 8.68107 10.1221 8.64907 9.99391 8.84018C9.86573 9.03147 9.49665 9.46151 9.38412 9.58898C9.27176 9.7168 9.15958 9.7328 8.96687 9.63716C8.77451 9.54169 8.15424 9.33973 7.41876 8.68907C6.84649 8.18276 6.45999 7.55769 6.34764 7.36622C6.23546 7.17511 6.3359 7.07182 6.43208 6.97671C6.51884 6.89102 6.6248 6.7536 6.72097 6.64213C6.81751 6.53049 6.84951 6.45102 6.91333 6.32338C6.97787 6.19591 6.94569 6.08444 6.89733 5.98862C6.84933 5.89316 6.4639 4.95307 6.30355 4.57049C6.14319 4.18827 5.98301 4.25191 5.87047 4.25191C5.7583 4.25191 5.62976 4.23591 5.5014 4.23591C5.37305 4.23591 5.16433 4.28373 4.9878 4.47484C4.81144 4.66613 4.31419 5.12836 4.31419 6.06827C4.31419 7.00836 5.0038 7.91662 5.10033 8.04391C5.19651 8.1712 6.4319 10.163 8.38926 10.928C10.3468 11.6926 10.3468 11.4375 10.6999 11.4055C11.0526 11.3737 11.8387 10.9435 11.9998 10.4976C12.1598 10.051 12.1598 9.66862 12.112 9.58898Z" fill="white"/>
       </svg>
       <span class="ml-2">COMPARTILHAR NO WHATSAPP</span>
     </a>
-    <a class="w-full btn bg-[#3C9CD8] border-[#3C9CD8]" href="https://twitter.com/intent/tweet?url={{ form_data.referrer_path }}" target="_blank">
+    <a class="w-full btn btn-twitter" href="https://twitter.com/intent/tweet?url={{ form_data.referrer_path }}" target="_blank">
       <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M19.6975 1.89305C18.9725 2.21429 18.1946 2.43216 17.3773 2.52942C18.2118 2.02968 18.8506 1.23702 19.1534 0.295398C18.3706 0.758193 17.5065 1.09424 16.5858 1.27641C15.8485 0.489895 14.7998 0 13.6367 0C11.4051 0 9.59574 1.80937 9.59574 4.03969C9.59574 4.35601 9.63144 4.66496 9.70038 4.96039C6.3426 4.79174 3.36515 3.18301 1.37239 0.738495C1.02404 1.33425 0.825879 2.02842 0.825879 2.76943C0.825879 4.1714 1.53979 5.40841 2.62295 6.13213C1.96074 6.10999 1.33792 5.92782 0.792664 5.62502V5.67549C0.792664 7.63256 2.186 9.2659 4.03351 9.63764C3.69502 9.72873 3.33808 9.7792 2.96882 9.7792C2.70789 9.7792 2.45556 9.75335 2.20815 9.70411C2.72263 11.3104 4.21446 12.4785 5.98199 12.5105C4.59972 13.5937 2.85681 14.2374 0.963762 14.2374C0.637594 14.2374 0.316319 14.2177 0 14.182C1.78845 15.3304 3.91169 16 6.19371 16C13.6269 16 17.69 9.84321 17.69 4.50374L17.6764 3.98063C18.4703 3.41439 19.1571 2.70297 19.6975 1.89305Z" fill="white"/>
       </svg>
       <span class="ml-2">COMPARTILHAR NO TWITTER</span>
     </a>
-    <a class="w-full btn bg-[#395AA1] border-[#395AA1]" href="http://www.facebook.com/sharer.php?u={{ form_data.referrer_path }}" target="_blank">
+    <a class="w-full btn btn-facebook" href="http://www.facebook.com/sharer.php?u={{ form_data.referrer_path }}" target="_blank">
       <svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M0.272495 8.52159H2.1242V15.7419C2.1242 15.8845 2.24615 16 2.39667 16H5.53631C5.68683 16 5.80878 15.8845 5.80878 15.7419V8.55562H7.9375C8.07591 8.55562 8.19238 8.45725 8.20818 8.32703L8.53149 5.66888C8.54036 5.59575 8.51591 5.5225 8.46424 5.46763C8.41254 5.41272 8.33854 5.38128 8.26087 5.38128H5.80891V3.715C5.80891 3.21272 6.09444 2.958 6.65771 2.958C6.73798 2.958 8.26087 2.958 8.26087 2.958C8.41139 2.958 8.53333 2.84244 8.53333 2.69994V0.259969C8.53333 0.117406 8.41139 0.00190625 8.26087 0.00190625H6.05145C6.03587 0.0011875 6.00126 0 5.95025 0C5.5669 0 4.23438 0.0712812 3.18178 0.988437C2.01552 2.00481 2.17765 3.22172 2.21639 3.43272V5.38122H0.272462C0.121945 5.38122 0 5.49672 0 5.63928V8.2635C3.29937e-05 8.40603 0.121978 8.52159 0.272495 8.52159Z" fill="white"/>
       </svg>
       <span class="ml-2">COMPARTILHAR NO FACEBOOK</span>
     </a>
     <div id="copyToClipboardTooltip" class="tooltip tooltip-bottom hover:before:hidden hover:after:hidden" data-tip="Link copiado">
-      <button id="copyToClipboard" class="w-full btn bg-[#39485F] border-[#39485F]">
+      <button id="copyToClipboard" class="w-full btn btn-copy">
         <svg width="16" height="19" viewBox="0 0 16 19" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M10.0352 19H2.96241C1.32889 19 0 17.6683 0 16.0312V5.97461C0 4.33759 1.32889 3.00586 2.96241 3.00586H10.0352C11.6687 3.00586 12.9976 4.33759 12.9976 5.97461V16.0312C12.9976 17.6683 11.6687 19 10.0352 19ZM2.96241 4.49023C2.14572 4.49023 1.48121 5.15617 1.48121 5.97461V16.0312C1.48121 16.8497 2.14572 17.5156 2.96241 17.5156H10.0352C10.8519 17.5156 11.5164 16.8497 11.5164 16.0312V5.97461C11.5164 5.15617 10.8519 4.49023 10.0352 4.49023H2.96241ZM15.96 14.1758V2.96875C15.96 1.33173 14.6311 0 12.9976 0H4.77689C4.36782 0 4.03629 0.332245 4.03629 0.742188C4.03629 1.15213 4.36782 1.48438 4.77689 1.48438H12.9976C13.8143 1.48438 14.4788 2.15031 14.4788 2.96875V14.1758C14.4788 14.5857 14.8103 14.918 15.2194 14.918C15.6285 14.918 15.96 14.5857 15.96 14.1758Z" fill="white"/>
         </svg>

diff --git a/app/tailwind/plugins/socialbuttons.plugin.js b/app/tailwind/plugins/socialbuttons.plugin.js
@@ -0,0 +1,28 @@
+const plugin = require('tailwindcss/plugin');
+const colorFunctions = require('daisyui/src/theming/functions');
+
+const colorProperties = (colorName, theme) => {
+    const color = theme("colors." + colorName);
+    const colorFocus = colorFunctions.generateDarkenColorFrom(color);
+    // const colorContent = colorFunctions.generateForegroundColorFrom(color);
+
+    return {
+        'color': 'white',
+        'background-color': color,
+        '&:hover': {
+            'background-color': theme("colors." + colorName + "-focus", "hsl(" + colorFocus + ")")
+        }
+    }
+}
+
+const socialbutton = plugin(({ addUtilities, theme }) => {
+
+    addUtilities({
+        '.btn-whatsapp': colorProperties('whatsapp', theme),
+        '.btn-facebook': colorProperties('facebook', theme),
+        '.btn-twitter': colorProperties('twitter', theme),
+        '.btn-copy': colorProperties('copy', theme),
+    })
+})
+
+module.exports = socialbutton
diff --git a/app/tailwind/tailwind.page.config.js b/app/tailwind/tailwind.page.config.js
@@ -38,10 +38,30 @@ module.exports = {
     '../**/*.py'
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        whatsapp: "#71C16A",
+        // 'whatsapp-focus': 'red',
+        twitter: "#3C9CD8",
+        facebook: "#395AA1",
+        copy: "#39485F"
+      }
+    },
+  },
+  daisyui: {
+    themes: [
+      "light",
+      // {
+      //   light: {
+      //     ...require("daisyui/src/theming/themes")["[data-theme=light]"],
+      //     '--rounded-btn': "none",
+      //   }
+      // },
+    ]
   },
   plugins: [
-    require("daisyui")
+    require("daisyui"),
+    require("./plugins/socialbuttons.plugin.js"),
   ],
 }
 
diff --git a/app/tailwind/templates/tailwind.html b/app/tailwind/templates/tailwind.html
@@ -1,6 +1,6 @@
 {% load cms_tags sekizai_tags static %}
 <!doctype html>
-<html lang="{{ LANGUAGE_CODE }}" data-theme="light">
+<html lang="{{ LANGUAGE_CODE }}">
 
 <head>
   <meta charset="utf-8" />