BaldissaraMatheus · BaldissaraMatheus · Feb 12, 2024 · Feb 12, 2024 · Feb 12, 2024 · Feb 12, 2024
diff --git a/README.md b/README.md
@@ -57,7 +57,7 @@ services:
 Use the Docker section above as reference for setting up variables and volumes.
 
 ## 🎨 Customize
-All CSS files are available in the stylesheets directory under the config volume. It already comes with 3 color themes: [Adwaita](https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/named-colors.html), [Nord](https://www.nordtheme.com/) and [Catppuccin](https://github.com/catppuccin/catppuccin). To use them, open the file `/stylesheets/index.css` and change the second line to the path of the color theme you want, you can find them under `/stylesheets/color-themes`.
+All CSS files are available in the stylesheets directory under the config volume, any custom style is recommended to be added to `custom.css` file. It already comes with 3 color themes: [Adwaita](https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/named-colors.html), [Nord](https://www.nordtheme.com/) and [Catppuccin](https://github.com/catppuccin/catppuccin). To use them, change the first line of `/stylesheets/custom.css` to the path of the color theme you want, you can find them under `/stylesheets/color-themes`.
 
 ## 📁 Files structure
 The way directories and files are organized in Tasks.md is quite simple. Every lane you add within the app is a directory in your filesystem and every task is file.

diff --git a/frontend/index.html b/frontend/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" href="./stylesheets/index.css">
+    <link rel="stylesheet" href="./stylesheets/index-2.3.0.css">
     <link rel="apple-touch-icon" sizes="180x180" href="./favicon/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="./favicon/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="./favicon/favicon-16x16.png">

diff --git a/frontend/public/stylesheets/custom.css b/frontend/public/stylesheets/custom.css
@@ -0,0 +1 @@
+@import url(./color-themes/adwaita.css);
diff --git a/frontend/public/stylesheets/index.css → frontend/public/stylesheets/index-2.3.0.css b/frontend/public/stylesheets/index.css → frontend/public/stylesheets/index-2.3.0.css
@@ -1,6 +1,6 @@
 /* Reset preset taken from https://keithjgrant.com/posts/2024/01/my-css-resets/ */
 @import url('./reset.css');
-@import url(./color-themes/adwaita.css);
+@import url('./custom.css');
 
 html,
 body,
@@ -105,6 +105,9 @@ button {
   background: var(--button-background-color);
   border: 1px solid var(--button-border-color);
   color: var(--button-font-color);
+  text-align: center;
+  text-align: -moz-center;
+  text-align: -webkit-center;
 }
 
 button:focus-within {
@@ -143,6 +146,11 @@ button.small {
   flex-wrap: wrap;
 }
 
+.header-buttons {
+  display: flex;
+  gap: 6px;
+}
+
 .search-input {
   max-width: 232px;
   width: 100%;
@@ -198,11 +206,6 @@ button.small {
   text-wrap: balance;
 }
 
-.lane__header-buttons {
-  display: flex;
-  gap: 6px;
-}
-
 .lane__content {
   flex-grow: 1;
   width: 300px;

diff --git a/frontend/src/components/card-name.jsx b/frontend/src/components/card-name.jsx
@@ -1,6 +1,7 @@
 import { createSignal } from "solid-js";
 import { Menu } from "./menu";
 import { getButtonCoordinates, handleKeyDown as handleKeyDown } from "../utils";
+import { BiRegularDotsVerticalRounded } from "solid-icons/bi";
 
 /**
  *
@@ -63,7 +64,7 @@ export function CardName(props) {
           {props.name}
         </strong>
       </div>
-      <div class="lane__header-buttons">
+      <div class="header-buttons">
         <button
           title="Show card options"
           class="small"
@@ -72,7 +73,7 @@ export function CardName(props) {
             handleKeyDown(e, () => handleClick(e, true), handleCancel)
           }
         >
-          ⋮
+          <BiRegularDotsVerticalRounded />
         </button>
       </div>
       <Menu

diff --git a/frontend/src/components/lane-name.jsx b/frontend/src/components/lane-name.jsx
@@ -1,6 +1,8 @@
 import { createSignal } from "solid-js";
 import { Menu } from "./menu";
 import { getButtonCoordinates, handleKeyDown } from "../utils";
+import { AiOutlinePlus } from 'solid-icons/ai'
+import { BiRegularDotsVerticalRounded } from 'solid-icons/bi'
 
 /**
  *
@@ -65,13 +67,13 @@ export function LaneName(props) {
           <h5 class="counter">{props.count}</h5>
         </div>
       </div>
-      <div class="lane__header-buttons">
+      <div class="header-buttons">
         <button
           title="Create new card"
           class="small"
           onClick={() => props.onCreateNewCardBtnClick()}
         >
-          +
+          <AiOutlinePlus />
         </button>
         <button
           title="Show lane options"
@@ -81,7 +83,7 @@ export function LaneName(props) {
             handleKeyDown(e, () => handleOptionsBtnClick(e, true), handleCancel)
           }
         >
-          ⋮
+          <BiRegularDotsVerticalRounded />
         </button>
       </div>
       <Menu

diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx
@@ -4,7 +4,7 @@ import { render } from 'solid-js/web';
 import App from './App';
 
 if (import.meta.env.DEV) {
-  await import('../public/stylesheets/index.css');
+  await import('../public/stylesheets/index-2.3.0.css');
 }
 
 const root = document.getElementById('root');