Revamp colors

Defozo · Sep 29, 2024 · 1ff31bb · 1ff31bb
1 parent d87edf3
commit 1ff31bb
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
   </head>
-  <body>
+  <body class="bg-[#F2F2F7]">
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/src/components/Declaration.tsx b/src/components/Declaration.tsx
@@ -29,7 +29,7 @@ type Props = {
 export function Declaration({ show, model, setModel }: Props) {
   return (
     <motion.div
-      className="overflow-hidden bg-gray-50 rounded-md"
+      className="overflow-hidden bg-white rounded-md"
       initial={false}
       variants={{
         show: { width: '32rem' },
@@ -95,11 +95,11 @@ function DeclarationContent({ model, setModel }: { model: Model; setModel: Dispa
 
   return (
     <div className="p-6 h-full overflow-y-auto">
-      <h2 className="text-2xl font-semibold">Deklaracja PCC-3</h2>
+      <h2 className="text-2xl font-semibold text-gov-blue">Deklaracja PCC-3</h2>
 
       <Accordion type="single" defaultValue="sekcja_a" collapsible className="mt-4">
         <AccordionItem value="sekcja_a">
-          <AccordionTrigger className="text-left">A. Okres, miejsce i cel składania deklaracji</AccordionTrigger>
+          <AccordionTrigger className="text-left font-bold">A. Okres, miejsce i cel składania deklaracji</AccordionTrigger>
           <AccordionContent className="pb-6">
             <DeclarationInput
               label="Data dokonania czynności"
@@ -125,7 +125,7 @@ function DeclarationContent({ model, setModel }: { model: Model; setModel: Dispa
           </AccordionContent>
         </AccordionItem>
         <AccordionItem value="sekcja_b">
-          <AccordionTrigger className="text-left">B. Dane podatnika</AccordionTrigger>
+          <AccordionTrigger className="text-left font-bold">B. Dane podatnika</AccordionTrigger>
           <AccordionContent className="pb-6">
             <DeclarationInputWrapper label="Podmiot składający deklarację">
               <Select
@@ -309,7 +309,7 @@ function DeclarationContent({ model, setModel }: { model: Model; setModel: Dispa
           </AccordionContent>
         </AccordionItem>
         <AccordionItem value="sekcja_c">
-          <AccordionTrigger className="text-left">C. Przedmiot opodatkowania</AccordionTrigger>
+          <AccordionTrigger className="text-left font-bold">C. Przedmiot opodatkowania</AccordionTrigger>
           <AccordionContent className="pb-6">
             <DeclarationInputWrapper label="Podmiot składający deklarację">
               <Select
@@ -370,7 +370,7 @@ function DeclarationContent({ model, setModel }: { model: Model; setModel: Dispa
           </AccordionContent>
         </AccordionItem>
         <AccordionItem value="sekcja_d">
-          <AccordionTrigger className="text-left">D. Obliczenie podatku od czynności cywilnoprawnych</AccordionTrigger>
+          <AccordionTrigger className="text-left font-bold">D. Obliczenie podatku od czynności cywilnoprawnych</AccordionTrigger>
           <AccordionContent className="pb-6">
             <DeclarationInputWrapper label="Rodzaj czynności cywilnoprawnej">
               <Select value={rodzajCzynnosci} onValueChange={(value) => setRodzajCzynnosci(value)}>
@@ -432,7 +432,7 @@ function DeclarationContent({ model, setModel }: { model: Model; setModel: Dispa
           </AccordionContent>
         </AccordionItem>
         <AccordionItem value="sekcja_e">
-          <AccordionTrigger className="text-left">E. Obliczenie podatku od umowy spółki</AccordionTrigger>
+          <AccordionTrigger className="text-left font-bold">E. Obliczenie podatku od umowy spółki</AccordionTrigger>
           <AccordionContent className="pb-6">
             <DeclarationInputWrapper label="Typ spółki">
               <Select
@@ -451,7 +451,7 @@ function DeclarationContent({ model, setModel }: { model: Model; setModel: Dispa
           </AccordionContent>
         </AccordionItem>
         <AccordionItem value="sekcja_f">
-          <AccordionTrigger className="text-left">F. Podatek do zapłaty</AccordionTrigger>
+          <AccordionTrigger className="text-left font-bold">F. Podatek do zapłaty</AccordionTrigger>
           <AccordionContent className="pb-6">
             <DeclarationInputWrapper label="Kwota podatku do zapłaty">
               <Input
@@ -464,7 +464,7 @@ function DeclarationContent({ model, setModel }: { model: Model; setModel: Dispa
           </AccordionContent>
         </AccordionItem>
         <AccordionItem value="sekcja_g">
-          <AccordionTrigger className="text-left">G. Informacje dodatkowe </AccordionTrigger>
+          <AccordionTrigger className="text-left font-bold">G. Informacje dodatkowe </AccordionTrigger>
           <AccordionContent className="pb-6">
             <DeclarationInput
               label="Województwo"

diff --git a/src/components/DeclarationInput.tsx b/src/components/DeclarationInput.tsx
@@ -16,7 +16,7 @@ export function DeclarationInput({ label, value, setValue }: Props) {
 
   return (
     <DeclarationInputWrapper label={label}>
-      <Input placeholder="" value={value} onChange={onChange} className="bg-white" />
+      <Input placeholder="" value={value} onChange={onChange} className="bg-white " />
     </DeclarationInputWrapper>
   )
 }
diff --git a/src/components/OurChatInput.tsx b/src/components/OurChatInput.tsx
@@ -33,7 +33,7 @@ export function OurChatInput({
   return (
     <form
       onSubmit={onSubmit}
-      className="relative rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring"
+      className="relative rounded-lg bg-background focus-within:ring-1 focus-within:ring-ring"
     >
       <ChatInput
         ref={inputRef}
@@ -43,7 +43,7 @@ export function OurChatInput({
         placeholder="Zadaj pytanie..."
         className="min-h-12 resize-none rounded-lg bg-background border-0 p-3 shadow-none focus-visible:ring-0"
       />
-      <div className="flex items-center p-3 pt-0">
+      <div className="flex items-center p-3 pt-0 text-gov-blue">
         <RecordButton
           onSuccess={(text) => {
             setInput((prev) => prev + text.trim())
@@ -58,7 +58,7 @@ export function OurChatInput({
           }}
         />
 
-        <Button disabled={disabled} type="submit" size="sm" className="ml-auto gap-1.5">
+        <Button disabled={disabled} type="submit" size="sm" className="ml-auto gap-1.5 bg-gov-blue text-white">
           Wyślij wiadomość
           <CornerDownLeft className="size-3.5" />
         </Button>

diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
@@ -12,7 +12,7 @@ const AccordionItem = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AccordionPrimitive.Item
     ref={ref}
-    className={cn("border-b", className)}
+    className={cn("border-b border-b-gov-blue", className)}
     {...props}
   />
 ))
@@ -32,7 +32,7 @@ const AccordionTrigger = React.forwardRef<
       {...props}
     >
       {children}
-      <ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+      <ChevronDownIcon className="h-4 w-4 shrink-0 text-gov-blue transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ))

diff --git a/src/components/ui/chat/chat-bubble.tsx b/src/components/ui/chat/chat-bubble.tsx
@@ -76,8 +76,8 @@ const chatBubbleMessageVariants = cva("p-4", {
   variants: {
     variant: {
       received:
-        "bg-secondary text-secondary-foreground rounded-r-lg rounded-tl-lg",
-      sent: "bg-primary text-primary-foreground rounded-l-lg rounded-tr-lg",
+        "bg-white text-secondary-foreground rounded-r-lg rounded-tl-lg",
+      sent: "bg-gov-blue text-primary-foreground rounded-l-lg rounded-tr-lg",
     },
     layout: {
       default: "",

diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
@@ -29,7 +29,7 @@ const SelectTrigger = React.forwardRef<
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <CaretSortIcon className="h-4 w-4 opacity-50" />
+      <CaretSortIcon className="h-4 w-4 text-gov-blue" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ))
@@ -47,7 +47,7 @@ const SelectScrollUpButton = React.forwardRef<
     )}
     {...props}
   >
-    <ChevronUpIcon />
+    <ChevronUpIcon className="text-gov-blue"/>
   </SelectPrimitive.ScrollUpButton>
 ))
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
@@ -64,7 +64,7 @@ const SelectScrollDownButton = React.forwardRef<
     )}
     {...props}
   >
-    <ChevronDownIcon />
+    <ChevronDownIcon className="text-gov-blue"/>
   </SelectPrimitive.ScrollDownButton>
 ))
 SelectScrollDownButton.displayName =
@@ -128,7 +128,7 @@ const SelectItem = React.forwardRef<
   >
     <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
+        <CheckIcon className="h-4 w-4 text-gov-blue" />
       </SelectPrimitive.ItemIndicator>
     </span>
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -10,6 +10,7 @@ export default {
   			sm: 'calc(var(--radius) - 4px)'
   		},
   		colors: {
+				"gov-blue": '#0052a5',
   			background: 'hsl(var(--background))',
   			foreground: 'hsl(var(--foreground))',
   			card: {
@@ -42,7 +43,7 @@ export default {
   			},
   			border: 'hsl(var(--border))',
   			input: 'hsl(var(--input))',
-  			ring: 'hsl(var(--ring))',
+  			ring: '#0052a5',
   			chart: {
   				'1': 'hsl(var(--chart-1))',
   				'2': 'hsl(var(--chart-2))',