feat: Prefer primary color (#2665)

apps/nextjs/src/app/[locale]/boards/[name]/settings/_appereance.tsx

@@ -123,7 +123,7 @@ export const ColorSettingsContent = ({ board }: Props) => {
           </Grid.Col>
         </Grid>
         <Group justify="end">
-          <Button type="submit" loading={isPending} color="teal">
+          <Button type="submit" loading={isPending}>
             {t("common.action.saveChanges")}
           </Button>
         </Group>

apps/nextjs/src/app/[locale]/boards/[name]/settings/_background.tsx

@@ -159,7 +159,7 @@ export const BackgroundSettingsContent = ({ board }: Props) => {
         </Grid>
 
         <Group justify="end">
-          <Button type="submit" loading={isPending} color="teal">
+          <Button type="submit" loading={isPending}>
             {t("common.action.saveChanges")}
           </Button>
         </Group>

apps/nextjs/src/app/[locale]/boards/[name]/settings/_behavior.tsx

@@ -38,7 +38,7 @@ export const BehaviorSettingsContent = ({ board }: Props) => {
         />
 
         <Group justify="end">
-          <Button type="submit" loading={isPending} color="teal">
+          <Button type="submit" loading={isPending}>
             {t("common.action.saveChanges")}
           </Button>
         </Group>

apps/nextjs/src/app/[locale]/boards/[name]/settings/_customCss.tsx

@@ -46,7 +46,7 @@ export const CustomCssSettingsContent = ({ board }: Props) => {
         </Alert>
 
         <Group justify="end">
-          <Button type="submit" loading={isPending} color="teal">
+          <Button type="submit" loading={isPending}>
             {t("common.action.saveChanges")}
           </Button>
         </Group>

apps/nextjs/src/app/[locale]/boards/[name]/settings/_general.tsx

@@ -116,7 +116,7 @@ export const GeneralSettingsContent = ({ board }: Props) => {
           </Grid.Col>
         </Grid>
         <Group justify="end">
-          <Button type="submit" loading={isPending} color="teal">
+          <Button type="submit" loading={isPending}>
             {t("common.action.saveChanges")}
           </Button>
         </Group>

apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.tsx

@@ -105,7 +105,7 @@ export const LayoutSettingsContent = ({ board }: Props) => {
         </Stack>
 
         <Group justify="end">
-          <Button type="submit" loading={isPending} color="teal">
+          <Button type="submit" loading={isPending}>
             {t("common.action.saveChanges")}
           </Button>
         </Group>

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_change-home-board.tsx

@@ -73,7 +73,7 @@ export const ChangeHomeBoardForm = ({ user, boardsData }: ChangeHomeBoardFormPro
         />
 
         <Group justify="end">
-          <Button type="submit" color="teal" loading={isPending}>
+          <Button type="submit" loading={isPending}>
             {t("common.action.save")}
           </Button>
         </Group>

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_change-search-preferences.tsx

@@ -66,7 +66,7 @@ export const ChangeSearchPreferencesForm = ({ user, searchEnginesData }: ChangeS
         />
 
         <Group justify="end">
-          <Button type="submit" color="teal" loading={isPending}>
+          <Button type="submit" loading={isPending}>
             {t("common.action.save")}
           </Button>
         </Group>

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_first-day-of-week.tsx

@@ -71,7 +71,7 @@ export const FirstDayOfWeek = ({ user }: FirstDayOfWeekProps) => {
         </Radio.Group>
 
         <Group justify="end">
-          <Button type="submit" color="teal" loading={isPending}>
+          <Button type="submit" loading={isPending}>
             {t("common.action.save")}
           </Button>
         </Group>

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_ping-icons-enabled.tsx

@@ -57,7 +57,7 @@ export const PingIconsEnabled = ({ user }: PingIconsEnabledProps) => {
         />
 
         <Group justify="end">
-          <Button type="submit" color="teal" loading={isPending}>
+          <Button type="submit" loading={isPending}>
             {t("common.action.save")}
           </Button>
         </Group>

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_profile-form.tsx

@@ -81,7 +81,7 @@ export const UserProfileForm = ({ user }: UserProfileFormProps) => {
 
         {isProviderCredentials && (
           <Group justify="end">
-            <Button type="submit" color="teal" disabled={!form.isDirty()} loading={isPending}>
+            <Button type="submit" disabled={!form.isDirty()} loading={isPending}>
               {t("common.action.saveChanges")}
             </Button>
           </Group>

apps/nextjs/src/app/[locale]/manage/users/[userId]/security/_components/_change-password-form.tsx

@@ -85,7 +85,7 @@ export const ChangePasswordForm = ({ user }: ChangePasswordFormProps) => {
             />
 
             <Group justify="end">
-              <Button type="submit" color="teal" loading={isPending}>
+              <Button type="submit" loading={isPending}>
                 {t("common.action.confirm")}
               </Button>
             </Group>

apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_rename-group-form.tsx

@@ -68,7 +68,7 @@ export const RenameGroupForm = ({ group, disabled }: RenameGroupFormProps) => {
 
         {!disabled && (
           <Group justify="end">
-            <Button type="submit" color="teal" loading={isPending}>
+            <Button type="submit" loading={isPending}>
               {t("common.action.saveChanges")}
             </Button>
           </Group>

apps/nextjs/src/app/[locale]/manage/users/groups/[id]/members/_add-group-member.tsx

@@ -40,9 +40,5 @@ export const AddGroupMember = ({ groupId, presentUserIds }: AddGroupMemberProps)
     );
   }, [openModal, presentUserIds, groupId, mutateAsync, tMembersAdd]);
 
-  return (
+  return <MobileAffixButton onClick={handleAddMember}>{tMembersAdd("label")}</MobileAffixButton>;
-    <MobileAffixButton color="teal" onClick={handleAddMember}>
-      {tMembersAdd("label")}
-    </MobileAffixButton>
-  );
 };

apps/nextjs/src/app/[locale]/manage/users/groups/[id]/permissions/_group-permission-form.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { useCallback } from "react";
 import type { PropsWithChildren } from "react";
+import { useCallback } from "react";
 import { Button, Card, Group, Switch, Text, Transition } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
@@ -108,7 +108,7 @@ export const SaveAffix = ({ groupId }: SaveAffixProps) => {
                 <Button disabled={isPending} onClick={form.reset}>
                   {t("common.action.discard")}
                 </Button>
-                <Button color="teal" loading={isPending} onClick={handleSubmit}>
+                <Button loading={isPending} onClick={handleSubmit}>
                   {t("common.action.saveChanges")}
                 </Button>
               </Group>

apps/nextjs/src/app/[locale]/manage/users/groups/[id]/settings/_group-home-boards.tsx

@@ -71,7 +71,7 @@ export const GroupHomeBoards = ({ homeBoardId, mobileHomeBoardId, groupId }: Gro
         />
 
         <Group justify="end">
-          <Button type="submit" color="teal" loading={isPending}>
+          <Button type="submit" loading={isPending}>
             {t("common.action.save")}
           </Button>
         </Group>

apps/nextjs/src/app/[locale]/manage/users/groups/_client.tsx

@@ -57,9 +57,5 @@ const AddGroup = () => {
     openModal();
   }, [openModal]);
 
-  return (
+  return <MobileAffixButton onClick={handleAddGroup}>{t("group.action.create.label")}</MobileAffixButton>;
-    <MobileAffixButton onClick={handleAddGroup} color="teal">
-      {t("group.action.create.label")}
-    </MobileAffixButton>
-  );
 };

apps/nextjs/src/app/[locale]/manage/users/groups/_groups-table.tsx

@@ -264,7 +264,7 @@ const SaveAffix = ({ visible, isPending, onDiscard, onSave }: SaveAffixProps) =>
                 <Button disabled={isPending} onClick={onDiscard}>
                   {t("common.action.discard")}
                 </Button>
-                <Button color="teal" loading={isPending} onClick={onSave}>
+                <Button loading={isPending} onClick={onSave}>
                   {t("common.action.saveChanges")}
                 </Button>
               </Group>

apps/nextjs/src/app/[locale]/manage/users/invites/_components/invite-list.tsx

@@ -89,11 +89,7 @@ const RenderTopToolbarCustomActions = () => {
     openModal();
   }, [openModal]);
 
-  return (
+  return <Button onClick={handleNewInvite}>{t("action.new.title")}</Button>;
-    <Button color="teal" onClick={handleNewInvite}>
-      {t("action.new.title")}
-    </Button>
-  );
 };
 
 const RenderRowActions = ({ row }: { row: MRT_Row<RouterOutputs["invite"]["getAll"][number]> }) => {

apps/nextjs/src/components/access/group-access-form.tsx

@@ -82,7 +82,7 @@ export const GroupAccessForm = <TPermission extends string>({
             <Button rightSection={<IconPlus size="1rem" />} variant="light" onClick={handleAddUser}>
               {t("common.action.add")}
             </Button>
-            <Button type="submit" loading={isPending} color="teal">
+            <Button type="submit" loading={isPending}>
               {t("permission.action.saveGroup")}
             </Button>
           </Group>

apps/nextjs/src/components/access/user-access-form.tsx

@@ -104,7 +104,7 @@ export const UsersAccessForm = <TPermission extends string>({
             <Button rightSection={<IconPlus size="1rem" />} variant="light" onClick={handleAddUser}>
               {t("common.action.add")}
             </Button>
-            <Button type="submit" loading={isPending} color="teal">
+            <Button type="submit" loading={isPending}>
               {t("permission.action.saveUser")}
             </Button>
           </Group>

apps/nextjs/src/components/board/sections/category/category-edit-modal.tsx

@@ -40,9 +40,7 @@ export const CategoryEditModal = createModal<InnerProps>(({ actions, innerProps
           <Button onClick={actions.closeModal} variant="subtle" color="gray">
             {t("common.action.cancel")}
           </Button>
-          <Button type="submit" color="teal">
+          <Button type="submit">{innerProps.submitLabel}</Button>
-            {innerProps.submitLabel}
-          </Button>
         </Group>
       </Stack>
     </form>

apps/nextjs/src/components/board/sections/dynamic/dynamic-edit-modal.tsx

@@ -48,9 +48,7 @@ export const DynamicSectionEditModal = createModal<ModalProps>(({ actions, inner
             <Button onClick={actions.closeModal} variant="subtle" color="gray">
               {t("common.action.cancel")}
             </Button>
-            <Button type="submit" color="teal">
+            <Button type="submit">{t("common.action.saveChanges")}</Button>
-              {t("common.action.saveChanges")}
-            </Button>
           </Group>
         </Group>
       </Stack>

packages/modals-collection/src/boards/add-board-modal.tsx

@@ -82,7 +82,7 @@ export const AddBoardModal = createModal(({ actions }) => {
           <Button onClick={actions.closeModal} variant="subtle" color="gray">
             {t("common.action.cancel")}
           </Button>
-          <Button type="submit" color="teal" loading={isPending}>
+          <Button type="submit" loading={isPending}>
             {t("common.action.create")}
           </Button>
         </Group>

packages/modals-collection/src/groups/add-group-modal.tsx

@@ -44,7 +44,7 @@ export const AddGroupModal = createModal<void>(({ actions }) => {
           <Button onClick={actions.closeModal} variant="subtle" color="gray">
             {t("common.action.cancel")}
           </Button>
-          <Button loading={isPending} type="submit" color="teal">
+          <Button loading={isPending} type="submit">
             {t("common.action.create")}
           </Button>
         </Group>

packages/modals-collection/src/invites/invite-create-modal.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Button, Group, Stack, Text } from "@mantine/core";
 import { DateTimePicker } from "@mantine/dates";
 import dayjs from "dayjs";
@@ -63,7 +62,7 @@ export const InviteCreateModal = createModal<void>(({ actions }) => {
           <Button onClick={actions.closeModal} variant="subtle" color="gray">
             {t("common.action.cancel")}
           </Button>
-          <Button type="submit" loading={isPending} color="teal">
+          <Button type="submit" loading={isPending}>
             {t("common.action.create")}
           </Button>
         </Group>

packages/widgets/src/health-monitoring/cluster/resource-popover.tsx

@@ -189,7 +189,7 @@ const StorageType = ({ item }: { item: StorageResource }) => {
   if (item.isShared) {
     return <Badge color="blue">{t("shared")}</Badge>;
   } else {
-    return <Badge color="teal">{t("local")}</Badge>;
+    return <Badge>{t("local")}</Badge>;
   }
 };
 

packages/widgets/src/modals/widget-advanced-options-modal.tsx

@@ -47,9 +47,7 @@ export const WidgetAdvancedOptionsModal = createModal<InnerProps>(({ actions, in
           <Button onClick={actions.closeModal} variant="subtle" color="gray">
             {t("common.action.cancel")}
           </Button>
-          <Button type="submit" color="teal">
+          <Button type="submit">{t("common.action.saveChanges")}</Button>
-            {t("common.action.saveChanges")}
-          </Button>
         </Group>
       </Stack>
     </form>

packages/widgets/src/modals/widget-edit-modal.tsx

@@ -142,9 +142,7 @@ export const WidgetEditModal = createModal<ModalProps<WidgetKind>>(({ actions, i
               <Button onClick={actions.closeModal} variant="subtle" color="gray">
                 {t("common.action.cancel")}
               </Button>
-              <Button type="submit" color="teal">
+              <Button type="submit">{t("common.action.saveChanges")}</Button>
-                {t("common.action.saveChanges")}
-              </Button>
             </Group>
           </Group>
         </Stack>