Merge pull request #1500 from Vizzuality/MRXN23-450-tailwind-updates

FE: tailwind config updates [MRXN23-450]
Vizzuality · Sep 21, 2023 · 68da64c · 68da64c · vercel · Sep 21, 2023
2 parents 97be5d0 + ca29d7b
commit 68da64c
Show file tree

Hide file tree

Showing 205 changed files with 7,653 additions and 1,913 deletions.
diff --git a/app/components.json b/app/components.json
@@ -5,7 +5,7 @@
   "tsx": true,
   "tailwind": {
     "config": "tailwind.config.js",
-    "css": "styles/tailwind.css",
+    "css": "styles/globals.css",
     "baseColor": "slate",
     "cssVariables": true
   },

diff --git a/app/components/avatar/component.tsx b/app/components/avatar/component.tsx
@@ -30,7 +30,7 @@ export const Avatar: React.FC<AvatarProps> = ({
   return (
     <div
       className={cn({
-        'relative z-0 flex items-center justify-center rounded-full border-2 border-gray-700 bg-transparent bg-cover bg-center bg-no-repeat hover:z-10 focus:outline-none':
+        'relative z-0 flex items-center justify-center rounded-full border-2 border-gray-800 bg-transparent bg-cover bg-center bg-no-repeat hover:z-10 focus:outline-none':
           true,
         'text-white': contrast > 2.5,
         'text-black': contrast < 2.5,

diff --git a/app/components/button/component.tsx b/app/components/button/component.tsx
@@ -11,28 +11,28 @@ const THEME = {
     'text-primary-500 bg-transparent hover:bg-transparent active:bg-transparent border border-primary-500 hover:border-primary-400 active:border-primary-300',
 
   secondary:
-    'text-white bg-gray-500 hover:bg-gray-400 active:bg-gray-300 border border-gray-500 hover:border-gray-400 active:border-gray-300',
+    'text-white bg-gray-700 hover:bg-gray-600 active:bg-gray-400 border border-gray-700 hover:border-gray-600 active:border-gray-400',
   'secondary-alt':
-    'text-gray-300 bg-transparent hover:bg-transparent active:bg-transparent border border-gray-400 hover:border-gray-300 active:border-gray-200',
+    'text-gray-400 bg-transparent hover:bg-transparent active:bg-transparent border border-gray-600 hover:border-gray-400 active:border-gray-300',
 
-  tertiary: 'text-black bg-gray-100 hover:bg-gray-400 hover:border-gray-400 hover:text-white',
+  tertiary: 'text-black bg-gray-200 hover:bg-gray-100 hover:border-gray-100 hover:text-white',
 
   white:
-    'text-gray-700 bg-white hover:text-white hover:bg-transparent active:bg-transparent border border-gray-400 hover:border-gray-300 active:border-gray-200',
+    'text-gray-800 bg-white hover:text-white hover:bg-transparent active:bg-transparent border border-gray-100 hover:border-gray-400 active:border-gray-300',
 
   danger:
-    'text-red-700 bg-transparent hover:text-white hover:bg-red-700 active:bg-red-600 border border-red-700 hover:border-red-600 active:border-red-500',
+    'text-red-800 bg-transparent hover:text-white hover:bg-red-800 active:bg-red-700 border border-red-800 hover:border-red-700 active:border-red-600',
   'danger-alt':
-    'text-white hover:bg-transparent border border-red-500 hover:text-red-500 bg-red-500 active:bg-red-600 hover:border hover:border-red-500 active:text-white active:border-red-600',
+    'text-white hover:bg-transparent border border-red-600 hover:text-red-600 bg-red-600 active:bg-red-700 hover:border hover:border-red-600 active:text-white active:border-red-700',
 
   spacial:
-    'text-white bg-transparent hover:bg-gray-400 active:bg-gray-300 flex items-center justify-center rounded-4xl focus:outline-none',
+    'text-white bg-transparent hover:bg-gray-100 active:bg-gray-400 flex items-center justify-center rounded-[40px] focus:outline-none',
 
-  dark: 'text-white bg-gray-600 border border-gray-600 hover:bg-black hover:text-white',
+  dark: 'text-white bg-gray-700 border border-gray-700 hover:bg-black hover:text-white',
   'dark-alt':
-    'text-gray-800 bg-transparent border border-gray-800 hover:border-gray-400 hover:text-gray-400',
+    'text-gray-900 bg-transparent border border-gray-900 hover:border-gray-100 hover:text-gray-100',
 
-  clear: 'text-gray-800 hover:text-gray-400',
+  clear: 'text-gray-900 hover:text-gray-100',
 
   'transparent-black':
     'text-black bg-transparent border border-black hover:bg-black hover:text-white',
@@ -93,7 +93,7 @@ const hasHref = (props: ButtonProps | AnchorProps): props is AnchorProps => 'hre
 
 function buildClassName({ className, disabled, size, theme }) {
   return cn({
-    'group relative flex items-center justify-center rounded-4xl transition-colors focus:outline-none':
+    'group relative flex items-center justify-center rounded-[40px] transition-colors focus:outline-none':
       true,
     [THEME[theme]]: true,
     [SIZE[size]]: true,
@@ -106,9 +106,9 @@ function buildChildren({ theme, children }) {
   if (theme === 'spacial') {
     return (
       <>
-        <div className="absolute bottom-0 left-0 right-0 top-0 z-0 rounded-4xl bg-gradient-to-r from-purple-500 to-blue-500">
+        <div className="absolute bottom-0 left-0 right-0 top-0 z-0 rounded-[40px] bg-gradient-to-r from-purple-600 to-blue-600">
           <div className="relative h-full w-full border-2 border-transparent">
-            <div className="absolute h-full w-full rounded-4xl bg-black transition-colors group-hover:bg-transparent" />
+            <div className="absolute h-full w-full rounded-[40px] bg-black transition-colors group-hover:bg-transparent" />
           </div>
         </div>
         <div className="relative z-20">{children}</div>

diff --git a/app/components/carousel/component.tsx b/app/components/carousel/component.tsx
@@ -51,7 +51,7 @@ export const Carousel: React.FC<CarouselProps> = ({ slides }: CarouselProps) =>
         type="button"
         aria-label="dot-element"
         onClick={() => slider.current.prev()}
-        className="absolute -left-36 top-12 flex h-16 w-16 items-center justify-center rounded-full border border-gray-500 opacity-30 hover:opacity-90"
+        className="absolute -left-36 top-12 flex h-16 w-16 items-center justify-center rounded-full border border-gray-600 opacity-30 hover:opacity-90"
       >
         <Icon className="h-3 w-3 text-black" icon={ARROW_LEFT_SVG} />
       </button>
@@ -106,8 +106,8 @@ export const Carousel: React.FC<CarouselProps> = ({ slides }: CarouselProps) =>
               }}
               className={cx({
                 'relative w-20': true,
-                'h-1 bg-blue-500': slide === i,
-                'h-0.5 bg-gray-300': slide !== i,
+                'h-1 bg-blue-600': slide === i,
+                'h-0.5 bg-gray-400': slide !== i,
               })}
             >
               <div className="absolute left-0 top-1/2 h-3 w-full -translate-y-1/2 transform bg-transparent" />
@@ -119,7 +119,7 @@ export const Carousel: React.FC<CarouselProps> = ({ slides }: CarouselProps) =>
         type="button"
         aria-label="dot-element"
         onClick={() => slider.current.next()}
-        className="absolute -right-36 top-12 flex h-16 w-16 items-center justify-center rounded-full border border-gray-500 opacity-30 hover:opacity-90"
+        className="absolute -right-36 top-12 flex h-16 w-16 items-center justify-center rounded-full border border-gray-600 opacity-30 hover:opacity-90"
       >
         <Icon className="h-3 w-3 text-black" icon={ARROW_RIGHT_SVG} />
       </button>

diff --git a/app/components/confirmation-prompt/component.tsx b/app/components/confirmation-prompt/component.tsx
@@ -27,14 +27,14 @@ export const ConfirmationPrompt: React.FC<ConfirmationPromptProps> = ({
   <Modal open={open} title={title} size="narrow" dismissable={dismissible} onDismiss={onDismiss}>
     <div className="px-8 py-4">
       <header>
-        <div className="leading-1 mt-8 font-heading text-xl font-medium text-gray-800 sm:mt-0 sm:pr-32">
+        <div className="leading-1 mt-8 font-heading text-xl font-medium text-gray-900 sm:mt-0 sm:pr-32">
           {title}
         </div>
         <p
           className={classnames({
             'my-4 text-sm sm:pr-32': true,
             'text-black underline': !!danger,
-            'text-gray-400': !danger,
+            'text-gray-100': !danger,
           })}
         >
           {description}

diff --git a/app/components/disclaimer/component.tsx b/app/components/disclaimer/component.tsx
@@ -7,8 +7,8 @@ import Icon from 'components/icon';
 import WARNING_SVG from 'svgs/notifications/warning.svg?sprite';
 
 const TYPE = {
-  warning: 'text-yellow-400',
-  blocked: 'text-red-500',
+  warning: 'text-yellow-500',
+  blocked: 'text-red-600',
   invalidated: 'text-white',
 };
 
@@ -20,7 +20,7 @@ export interface DisclaimerProps {
 export const Disclaimer: React.FC<DisclaimerProps> = ({ children, type }: DisclaimerProps) => (
   <div
     className={cx({
-      'flex w-full items-center space-x-4 rounded-xl bg-gray-500 px-4 py-3 text-sm': true,
+      'flex w-full items-center space-x-4 rounded-xl bg-gray-600 px-4 py-3 text-sm': true,
     })}
   >
     <Icon

diff --git a/app/components/features/intersect-item/component.tsx b/app/components/features/intersect-item/component.tsx
@@ -114,7 +114,7 @@ export const Item: React.FC<ItemProps> = ({
     <div
       ref={ref}
       className={cx({
-        'bg-white text-gray-500': true,
+        'bg-white text-gray-600': true,
         [className]: !!className,
         invisible: !inView,
       })}
@@ -130,7 +130,7 @@ export const Item: React.FC<ItemProps> = ({
             id={`checkbox-${id}`}
             value={`${id}`}
             checked={selected}
-            className="form-checkbox-dark mt-1.5 block h-4 w-4 text-green-300"
+            className="form-checkbox-dark mt-1.5 block h-4 w-4 text-green-400"
             onChange={onSelectedChanged}
           />
           <h2 className="mt-1 font-heading text-sm">{name}</h2>
@@ -139,8 +139,8 @@ export const Item: React.FC<ItemProps> = ({
         {selected && (
           <div>
             <div className="mt-3 flex items-center font-heading tracking-wide">
-              <Icon icon={SPLIT_SVG} className="h-5 w-5 text-green-300" />
-              <h4 className="ml-2 text-xs uppercase text-gray-500">
+              <Icon icon={SPLIT_SVG} className="h-5 w-5 text-green-400" />
+              <h4 className="ml-2 text-xs uppercase text-gray-600">
                 You can <strong>split</strong> this feature into categories
               </h4>
             </div>
@@ -170,15 +170,15 @@ export const Item: React.FC<ItemProps> = ({
 
             return (
               <li key={`${f.value}`} className="relative mt-0.5 flex items-center py-2 pr-2.5">
-                <div className="absolute left-0 top-0 block h-full w-px bg-green-300" />
+                <div className="absolute left-0 top-0 block h-full w-px bg-green-400" />
                 <div className="relative flex font-heading text-xs">
                   <div className="ml-2.5">
                     <Checkbox
                       theme="light"
                       id={`checkbox-${f.value}`}
                       value={`${f.value}`}
                       checked={checked}
-                      className="form-checkbox-dark block h-4 w-4 text-green-300"
+                      className="form-checkbox-dark block h-4 w-4 text-green-400"
                       onChange={onSplitFeaturesChanged}
                     />
                   </div>

diff --git a/app/components/features/selected-item/component.tsx b/app/components/features/selected-item/component.tsx
@@ -129,14 +129,14 @@ export const Item: React.FC<ItemProps> = ({
   return (
     <div
       className={cx({
-        'bg-gray-700 text-white': true,
+        'bg-gray-800 text-white': true,
         [className]: !!className,
       })}
     >
       <header
         className={cx({
           'border-l-4 px-4 py-2': true,
-          'border-yellow-400': true,
+          'border-yellow-500': true,
         })}
       >
         <div className="flex items-start justify-between">
@@ -147,7 +147,7 @@ export const Item: React.FC<ItemProps> = ({
               <Tooltip
                 arrow
                 placement="top"
-                content={<div className="rounded bg-white p-2 text-gray-500">Split</div>}
+                content={<div className="rounded bg-white p-2 text-gray-600">Split</div>}
               >
                 <button
                   aria-label="manage-see-on-map"
@@ -156,7 +156,7 @@ export const Item: React.FC<ItemProps> = ({
                   className={cx({
                     'flex h-5 w-5 items-center justify-center ': true,
                     'text-white': !splitSelected,
-                    'text-yellow-400': !!splitSelected,
+                    'text-yellow-500': !!splitSelected,
                   })}
                 >
                   <Icon icon={SPLIT_SVG} className="h-4 w-4" />
@@ -168,7 +168,7 @@ export const Item: React.FC<ItemProps> = ({
               arrow
               placement="top"
               content={
-                <div className="rounded bg-white p-2 text-gray-500">
+                <div className="rounded bg-white p-2 text-gray-600">
                   {isShown ? 'Remove from map' : 'See on map'}
                 </div>
               }
@@ -179,7 +179,7 @@ export const Item: React.FC<ItemProps> = ({
                 onClick={onSeeOnMap}
                 className={cx({
                   'flex h-5 w-5 items-center justify-center text-white': true,
-                  'text-gray-300': !isShown,
+                  'text-gray-400': !isShown,
                 })}
               >
                 <Icon className="h-4 w-4" icon={isShown ? SHOW_SVG : HIDE_SVG} />
@@ -190,7 +190,7 @@ export const Item: React.FC<ItemProps> = ({
               <Tooltip
                 arrow
                 placement="top"
-                content={<div className="rounded bg-white p-2 text-gray-500">Remove</div>}
+                content={<div className="rounded bg-white p-2 text-gray-600">Remove</div>}
               >
                 <button
                   aria-label="manage-see-on-map"
@@ -247,7 +247,7 @@ export const Item: React.FC<ItemProps> = ({
         {editable && strat && (
           <div>
             <div className="mt-3 flex items-center space-x-2 font-heading tracking-wide">
-              <Icon icon={INTERSECT_SVG} className="h-5 w-5 text-yellow-300" />
+              <Icon icon={INTERSECT_SVG} className="h-5 w-5 text-yellow-400" />
               <h4 className="ml-2 text-xs uppercase text-white">
                 You can <strong>intersect</strong> this feature with others
               </h4>
@@ -309,14 +309,14 @@ export const Item: React.FC<ItemProps> = ({
 
             return (
               <li key={`${f.value}`} className="relative mt-0.5 flex items-center py-2 pr-2.5">
-                <div className="absolute left-0 top-0 block h-full w-px bg-yellow-200" />
+                <div className="absolute left-0 top-0 block h-full w-px bg-yellow-300" />
                 <div className="relative flex font-heading text-xs">
                   <div className="ml-2.5">
                     <Checkbox
                       id={`checkbox-${f.value}`}
                       value={`${f.value}`}
                       checked={checked}
-                      className="form-checkbox-dark block h-4 w-4 text-yellow-200"
+                      className="form-checkbox-dark block h-4 w-4 text-yellow-300"
                       onChange={onSplitFeaturesChanged}
                     />
                   </div>
@@ -336,7 +336,7 @@ export const Item: React.FC<ItemProps> = ({
           {intersectFeaturesSelected.map((f) => {
             return (
               <li key={`${f.value}`} className="relative mt-0.5 flex items-center py-2 pr-2.5">
-                <div className="absolute left-0 top-0 block h-full w-px bg-gradient-to-b from-green-300 to-yellow-300" />
+                <div className="absolute left-0 top-0 block h-full w-px bg-gradient-to-b from-green-400 to-yellow-400" />
                 <div className="relative flex font-heading text-xs">
                   <div className="ml-2.5 inline-block max-w-sm">
                     {name} in {f.label}

diff --git a/app/components/features/target-spf-item/component.tsx b/app/components/features/target-spf-item/component.tsx
@@ -1,12 +1,11 @@
 import React, { useEffect, useRef, useState } from 'react';
 
-import cx from 'classnames';
-
 import Input from 'components/forms/input';
 import Label from 'components/forms/label';
 import Slider from 'components/forms/slider';
 import Icon from 'components/icon';
 import Tooltip from 'components/tooltip';
+import { cn } from 'utils/cn';
 
 import HIDE_SVG from 'svgs/ui/hide.svg?sprite';
 import REMOVE_SVG from 'svgs/ui/remove.svg?sprite';
@@ -52,22 +51,22 @@ export const TargetSPFItem: React.FC<TargetSPFItemProps> = ({
   return (
     <div
       key={id}
-      className={cx({
+      className={cn({
         'relative mb-2 border-transparent py-2 pl-5 text-xs text-white': true,
         [className]: !!className,
-        'bg-gray-700': !isAllTargets,
-        'rounded-lg border bg-gray-500': isAllTargets,
+        'bg-gray-800': !isAllTargets,
+        'rounded-lg border bg-gray-700': isAllTargets,
       })}
     >
       <div
-        className={cx({
+        className={cn({
           'absolute left-0 top-0 h-full w-1 ': true,
-          'bg-yellow-400': !isAllTargets,
+          'bg-yellow-500': !isAllTargets,
         })}
       />
       <div className="flex items-start justify-between pb-2 pr-2">
         <span
-          className={cx({
+          className={cn({
             'pr-10 font-heading text-sm font-medium': true,
             'w-4/5': !editable,
           })}
@@ -79,15 +78,15 @@ export const TargetSPFItem: React.FC<TargetSPFItemProps> = ({
             <Tooltip
               arrow
               placement="top"
-              content={<div className="rounded bg-white p-2 text-gray-500">See on map</div>}
+              content={<div className="rounded bg-white p-2 text-gray-600">See on map</div>}
             >
               <button
                 aria-label="manage-see-on-map"
                 type="button"
                 onClick={onSeeOnMap}
-                className={cx({
+                className={cn({
                   'flex h-5 w-5 items-center justify-center text-white': true,
-                  'text-gray-300': !isShown,
+                  'text-gray-400': !isShown,
                 })}
               >
                 <Icon className="h-4 w-4" icon={isShown ? SHOW_SVG : HIDE_SVG} />
@@ -98,7 +97,7 @@ export const TargetSPFItem: React.FC<TargetSPFItemProps> = ({
             <Tooltip
               arrow
               placement="top"
-              content={<div className="rounded bg-white p-2 text-gray-500">Remove</div>}
+              content={<div className="rounded bg-white p-2 text-gray-600">Remove</div>}
             >
               <button
                 aria-label="manage-see-on-map"
@@ -130,12 +129,12 @@ export const TargetSPFItem: React.FC<TargetSPFItemProps> = ({
               if (onChangeTarget) onChangeTarget(+(sliderValue * 100).toFixed(0));
             }}
           />
-          <div className="flex w-full justify-between text-gray-400">
+          <div className="flex w-full justify-between text-gray-100">
             <span>0%</span>
             <span>100%</span>
           </div>
         </div>
-        <div className="flex w-24 flex-col justify-between border-l border-gray-500 px-4">
+        <div className="flex w-24 flex-col justify-between border-l border-gray-600 px-4">
           <span className="whitespace-nowrap">{isAllTargets ? 'ALL SPF' : 'SPF'}</span>
           <div className="mb-6 w-10">
             <Input