change blue across app

Vizzuality · Sep 14, 2023 · 9bc9dbd · 9bc9dbd
1 parent b454e0f
commit 9bc9dbd
Show file tree

Hide file tree

Showing 54 changed files with 131 additions and 125 deletions.
diff --git a/app/components/button/component.tsx b/app/components/button/component.tsx
@@ -106,7 +106,7 @@ function buildChildren({ theme, children }) {
   if (theme === 'spacial') {
     return (
       <>
-        <div className="absolute bottom-0 left-0 right-0 top-0 z-0 rounded-[40px] bg-gradient-to-r from-purple-600 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-[40px] bg-black transition-colors group-hover:bg-transparent" />
           </div>

diff --git a/app/components/carousel/component.tsx b/app/components/carousel/component.tsx
@@ -106,7 +106,7 @@ export const Carousel: React.FC<CarouselProps> = ({ slides }: CarouselProps) =>
               }}
               className={cx({
                 'relative w-20': true,
-                'h-1 bg-blue-500': slide === i,
+                'h-1 bg-blue-600': slide === i,
                 'h-0.5 bg-gray-400': slide !== i,
               })}
             >

diff --git a/app/components/icon/component.stories.tsx b/app/components/icon/component.stories.tsx
@@ -1,6 +1,9 @@
 import React from 'react';
+
 import { Story } from '@storybook/react/types-6-0';
+
 import DOWNLOAD_SVG from 'svgs/ui/download.svg';
+
 import Icon, { IconProps } from './component';
 
 export default {
@@ -12,6 +15,6 @@ const Template: Story<IconProps> = (args) => <Icon {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-  className: 'w-5 h-5 text-blue-500',
+  className: 'w-5 h-5 text-blue-600',
   icon: DOWNLOAD_SVG,
 };
diff --git a/app/components/info-button/component.tsx b/app/components/info-button/component.tsx
@@ -9,7 +9,7 @@ import INFO_SVG from 'svgs/ui/info.svg?sprite';
 
 const THEME = {
   primary: {
-    button: 'bg-blue-400',
+    button: 'bg-blue-500',
     icon: 'text-gray-900',
   },
   secondary: {

diff --git a/app/components/loading/component.stories.tsx b/app/components/loading/component.stories.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
+
 import { Story } from '@storybook/react/types-6-0';
+
 import Loading from './component';
 import { LoadingProps } from './types';
 
@@ -12,6 +14,6 @@ const Template: Story<LoadingProps> = (args) => <Loading {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-  className: 'w-5 h-5 text-blue-500',
+  className: 'w-5 h-5 text-blue-600',
   visible: true,
 };
diff --git a/app/components/map/legend/mock.tsx b/app/components/map/legend/mock.tsx
@@ -97,7 +97,7 @@ const ITEMS = [
   {
     id: 'YYY',
     name: 'All features',
-    icon: <div className="mt-1 h-3 w-3 rounded bg-blue-500" />,
+    icon: <div className="mt-1 h-3 w-3 rounded bg-blue-600" />,
     description:
       'Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus minus eligendi doloremque unde, atque maxime.',
   },

diff --git a/app/components/progress-bar/component.tsx b/app/components/progress-bar/component.tsx
@@ -18,9 +18,9 @@ export const ProgressBar: React.FC<ProgressBarProps> = ({
         className: !!className,
       })}
     >
-      <div className="h-0.5 bg-gradient-to-r from-blue-400 to-purple-600 opacity-30" />
+      <div className="h-0.5 bg-gradient-to-r from-blue-500 to-purple-600 opacity-30" />
       <div
-        className="absolute bottom-0 h-0.5 max-w-full bg-gradient-to-r from-blue-400 to-purple-600"
+        className="absolute bottom-0 h-0.5 max-w-full bg-gradient-to-r from-blue-500 to-purple-600"
         style={{ width: `${progress}%` }}
       />
     </div>

diff --git a/app/components/toast/component.tsx b/app/components/toast/component.tsx
@@ -18,8 +18,8 @@ import { ToastProps, ToastTheme } from './types';
 const THEME: ToastTheme = {
   info: {
     icon: INFO_SVG,
-    bg: 'from-blue-400 to-blue-700',
-    hoverBg: 'from-blue-100 to-blue-400',
+    bg: 'from-blue-500 to-blue-800',
+    hoverBg: 'from-blue-200 to-blue-500',
   },
   success: {
     icon: SUCCESS_SVG,

diff --git a/app/dist/output.css b/app/dist/output.css
@@ -2831,17 +2831,17 @@ input[data-autocompleted] {
   border-color: rgb(30 199 255 / var(--tw-border-opacity));
 }
 
-.border-blue-500 {
+.border-blue-600 {
   --tw-border-opacity: 1;
   border-color: rgb(1 173 241 / var(--tw-border-opacity));
 }
 
-.border-blue-700 {
+.border-blue-800 {
   --tw-border-opacity: 1;
   border-color: rgb(27 114 245 / var(--tw-border-opacity));
 }
 
-.border-blue-800 {
+.border-blue-900 {
   --tw-border-opacity: 1;
   border-color: rgb(1 94 235 / var(--tw-border-opacity));
 }
@@ -2981,36 +2981,36 @@ input[data-autocompleted] {
   background-color: rgb(0 0 0 / 0.4);
 }
 
-.bg-blue-100 {
+.bg-blue-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(153 230 255 / var(--tw-bg-opacity));
 }
 
-.bg-blue-400 {
+.bg-blue-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(0 191 255 / var(--tw-bg-opacity));
 }
 
-.bg-blue-400\/25 {
+.bg-blue-500\/25 {
   background-color: rgb(0 191 255 / 0.25);
 }
 
-.bg-blue-500 {
+.bg-blue-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(1 173 241 / var(--tw-bg-opacity));
 }
 
-.bg-blue-600 {
+.bg-blue-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(55 135 255 / var(--tw-bg-opacity));
 }
 
-.bg-blue-700 {
+.bg-blue-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(27 114 245 / var(--tw-bg-opacity));
 }
 
-.bg-blue-800 {
+.bg-blue-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(1 94 235 / var(--tw-bg-opacity));
 }
@@ -3239,15 +3239,15 @@ input[data-autocompleted] {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.from-blue-100 {
+.from-blue-200 {
   --tw-gradient-from: #99E6FF var(--tw-gradient-from-position);
   --tw-gradient-from-position:  ;
   --tw-gradient-to: rgb(153 230 255 / 0)  var(--tw-gradient-from-position);
   --tw-gradient-to-position:  ;
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.from-blue-400 {
+.from-blue-500 {
   --tw-gradient-from: #00BFFF var(--tw-gradient-from-position);
   --tw-gradient-from-position:  ;
   --tw-gradient-to: rgb(0 191 255 / 0)  var(--tw-gradient-from-position);
@@ -3381,17 +3381,17 @@ input[data-autocompleted] {
   --tw-gradient-to-position:  ;
 }
 
-.to-blue-400 {
+.to-blue-500 {
   --tw-gradient-to: #00BFFF var(--tw-gradient-to-position);
   --tw-gradient-to-position:  ;
 }
 
-.to-blue-500 {
+.to-blue-600 {
   --tw-gradient-to: #01ADF1 var(--tw-gradient-to-position);
   --tw-gradient-to-position:  ;
 }
 
-.to-blue-700 {
+.to-blue-800 {
   --tw-gradient-to: #1B72F5 var(--tw-gradient-to-position);
   --tw-gradient-to-position:  ;
 }
@@ -4180,12 +4180,12 @@ input[data-autocompleted] {
   color: rgb(30 199 255 / var(--tw-text-opacity));
 }
 
-.text-blue-400 {
+.text-blue-500 {
   --tw-text-opacity: 1;
   color: rgb(0 191 255 / var(--tw-text-opacity));
 }
 
-.text-blue-500 {
+.text-blue-600 {
   --tw-text-opacity: 1;
   color: rgb(1 173 241 / var(--tw-text-opacity));
 }
@@ -5513,13 +5513,13 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
   border-radius: 0.125rem;
 }
 
-.before\:bg-blue-400::before {
+.before\:bg-blue-500::before {
   content: var(--tw-content);
   --tw-bg-opacity: 1;
   background-color: rgb(0 191 255 / var(--tw-bg-opacity));
 }
 
-.before\:bg-blue-500::before {
+.before\:bg-blue-600::before {
   content: var(--tw-content);
   --tw-bg-opacity: 1;
   background-color: rgb(1 173 241 / var(--tw-bg-opacity));
@@ -5708,7 +5708,7 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
   background-color: rgb(30 199 255 / var(--tw-bg-opacity));
 }
 
-.after\:bg-blue-400::after {
+.after\:bg-blue-500::after {
   content: var(--tw-content);
   --tw-bg-opacity: 1;
   background-color: rgb(0 191 255 / var(--tw-bg-opacity));
@@ -5795,7 +5795,7 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
   border-color: transparent;
 }
 
-.checked\:bg-blue-400:checked {
+.checked\:bg-blue-500:checked {
   --tw-bg-opacity: 1;
   background-color: rgb(0 191 255 / var(--tw-bg-opacity));
 }
@@ -6074,7 +6074,7 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.focus\:ring-blue-500:focus {
+.focus\:ring-blue-600:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(1 173 241 / var(--tw-ring-opacity));
 }
@@ -6184,7 +6184,7 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
   border-color: rgb(53 55 62 / var(--tw-border-opacity));
 }
 
-.group:hover .group-hover\:bg-blue-400 {
+.group:hover .group-hover\:bg-blue-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(0 191 255 / var(--tw-bg-opacity));
 }
@@ -6258,7 +6258,7 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.data-\[state\=checked\]\:bg-blue-500[data-state=checked] {
+.data-\[state\=checked\]\:bg-blue-600[data-state=checked] {
   --tw-bg-opacity: 1;
   background-color: rgb(1 173 241 / var(--tw-bg-opacity));
 }

diff --git a/app/layout/community/component.tsx b/app/layout/community/component.tsx
@@ -38,7 +38,7 @@ export const CommunityInfo: React.FC<CommunityInfoProps> = () => {
             <div className="flex w-96 flex-col">
               <h4 className="mb-2">Reach out with comments or suggestions.</h4>
               <a
-                className="text-left text-blue-500 hover:underline"
+                className="text-left text-blue-600 hover:underline"
                 href={`mailto:${process.env.NEXT_PUBLIC_CONTACT_EMAIL}`}
                 rel="noopener noreferrer"
                 target="_blank"
@@ -51,7 +51,7 @@ export const CommunityInfo: React.FC<CommunityInfoProps> = () => {
             <div className="flex w-96 flex-col">
               <h4 className="mb-2">Follow us on twitter and join in the conversation.</h4>
               <a
-                className="text-left text-blue-500 hover:underline"
+                className="text-left text-blue-600 hover:underline"
                 href="https://twitter.com/marxan_planning?"
                 rel="noopener noreferrer"
                 target="_blank"

diff --git a/app/layout/loading/component.tsx b/app/layout/loading/component.tsx
@@ -27,7 +27,7 @@ export const Loading: React.FC<LoadingProps> = ({ loading }: LoadingProps) => {
         >
           <div
             className={cx({
-              'absolute left-0 top-0 h-1 w-full bg-gradient-to-r from-purple-600 to-blue-500 transition-transform':
+              'absolute left-0 top-0 h-1 w-full bg-gradient-to-r from-purple-600 to-blue-600 transition-transform':
                 true,
             })}
             style={{

diff --git a/app/layout/me/profile/avatar/component.tsx b/app/layout/me/profile/avatar/component.tsx
@@ -98,14 +98,14 @@ export const AvatarMe: React.FC<AvatarMeProps> = ({ value, onChange }: AvatarMeP
             }}
           >
             <Avatar
-              className="h-16 w-16 bg-blue-700 text-sm uppercase text-white"
+              className="h-16 w-16 bg-blue-800 text-sm uppercase text-white"
               bgImage={preview}
             >
               {!preview && (displayName || email).slice(0, 2)}
             </Avatar>
 
             <motion.div
-              className="absolute bottom-0 left-0 right-0 top-0 z-10 flex h-full w-full items-center justify-center rounded-full bg-blue-600"
+              className="absolute bottom-0 left-0 right-0 top-0 z-10 flex h-full w-full items-center justify-center rounded-full bg-blue-700"
               animate={hover ? 'enter' : 'exit'}
               initial={{ opacity: 0, y: '50%' }}
               transition={{

diff --git a/app/layout/project/navigation/submenu/index.tsx b/app/layout/project/navigation/submenu/index.tsx
@@ -28,7 +28,7 @@ export const SubMenu = ({ items }: { items: SubMenuItem[] }): JSX.Element => {
               href={item.route}
               className={cn({
                 'flex px-[10px]': true,
-                'relative overflow-hidden before:absolute before:-left-[1px] before:block before:h-full before:w-[3px] before:rounded-sm before:bg-blue-400 before:drop-shadow-blue after:absolute after:-right-[1px] after:block after:h-full after:w-[3px] after:rounded-sm after:bg-blue-400 after:drop-shadow-blue':
+                'relative overflow-hidden before:absolute before:-left-[1px] before:block before:h-full before:w-[3px] before:rounded-sm before:bg-blue-500 before:drop-shadow-blue after:absolute after:-right-[1px] after:block after:h-full after:w-[3px] after:rounded-sm after:bg-blue-500 after:drop-shadow-blue':
                   item.selected,
               })}
             >

diff --git a/app/layout/project/navigation/user-menu/constants.ts b/app/layout/project/navigation/user-menu/constants.ts
@@ -1,4 +1,4 @@
 export const ITEM_COMMON_CLASSES =
-  'flex items-center justify-between rounded-3xl bg-gray-100 p-4 hover:bg-blue-50 transition-colors';
+  'flex items-center justify-between rounded-3xl bg-gray-100 p-4 hover:bg-blue-100 transition-colors';
 export const ITEM_TITLE_COMMON_CLASSES = 'flex items-center space-x-2 font-medium text-black';
 export const ITEM_DESCRIPTION_COMMON_CLASSES = 'text-gray-600 leading-normal';
diff --git a/app/layout/project/navigation/user-menu/index.tsx b/app/layout/project/navigation/user-menu/index.tsx
@@ -112,13 +112,13 @@ export const UserMenu = (): JSX.Element => {
                 'group items-start space-x-5 bg-transparent': true,
               })}
             >
-              <div className="rounded-xl bg-gray-100 p-2 group-hover:bg-blue-400">
+              <div className="rounded-xl bg-gray-100 p-2 group-hover:bg-blue-500">
                 <Icon icon={PROJECT_DASHBOARD_SVG} className="h-5 w-5 transition-none" />
               </div>
               <div className="space-y-1">
                 <h4 className={ITEM_TITLE_COMMON_CLASSES}>
                   <span>Projects dashboard</span>
-                  <span className="block rounded-[4px] border border-blue-300 bg-blue-100 px-1 text-xs font-semibold">
+                  <span className="block rounded-[4px] border border-blue-300 bg-blue-200 px-1 text-xs font-semibold">
                     {totalProjects}
                   </span>
                 </h4>
@@ -138,7 +138,7 @@ export const UserMenu = (): JSX.Element => {
               </div>
               <Switch
                 onCheckedChange={onToggleHelpGuide}
-                className="bg-gray-600 data-[state=checked]:bg-blue-500"
+                className="bg-gray-600 data-[state=checked]:bg-blue-600"
                 checked={active}
               />
             </div>
@@ -170,7 +170,7 @@ export const UserMenu = (): JSX.Element => {
               href="/community/projects"
               className="flex items-center space-x-2 rounded-3xl bg-black/40 bg-[url('/images/bg-community-projects.png')] bg-right-bottom p-4 hover:bg-blend-darken"
             >
-              <div className="rounded-xl bg-blue-400 p-2 text-white">
+              <div className="rounded-xl bg-blue-500 p-2 text-white">
                 <Icon icon={COMMUNITY_SVG} className="h-5 w-5" />
               </div>
               <h4

diff --git a/...roject/sidebar/project/header/project-button/publish-modal/company-uploader/component.tsx b/...roject/sidebar/project/header/project-button/publish-modal/company-uploader/component.tsx
@@ -124,7 +124,7 @@ export const CompanyUploader: React.FC<CompanyUploaderProps> = ({
                 <img src={input.value.logoDataUrl} alt={input.value.name} className="max-w-full" />
               </div>
               <label
-                className="rounded-3xl bg-blue-100 bg-opacity-10 px-3 py-1"
+                className="rounded-3xl bg-blue-200 bg-opacity-10 px-3 py-1"
                 htmlFor="cancel-shapefile-btn"
               >
                 <p className="text-sm text-primary-500">{input.value.name}</p>

diff --git a/.../project/sidebar/project/inventory-panel/components/inventory-table/header-item/index.tsx b/.../project/sidebar/project/inventory-panel/components/inventory-table/header-item/index.tsx
@@ -39,14 +39,14 @@ const HeaderItem = ({ className, text, name, sorting, onClick }: HeaderItem): JS
         <HiArrowDown
           className={cn({
             'h-5 w-5 text-gray-600': true,
-            'text-blue-400': isActive,
+            'text-blue-500': isActive,
           })}
         />
       ) : (
         <HiArrowUp
           className={cn({
             'h-5 w-5 text-gray-600': true,
-            'text-blue-400': isActive,
+            'text-blue-500': isActive,
           })}
         />
       )}