working text align

Author: RafaelGB

src/cdm/StyleModel.ts

@@ -12,5 +12,5 @@ export type ColorPickerProps = {
 } & BaseStyleProps;
 
 export type TextAlignmentProps = {
-
+    currentAlignment: string;
 } & BaseStyleProps;

src/components/modals/columnSettings/handlers/AlignmentSelectorHandler.tsx

@@ -21,6 +21,7 @@ export class AlignmentSelectorHandler extends AbstractHandlerClass<ColumnSetting
       <TextAlignmentSelector
         modal={columnSettingsManager.modal}
         columnKey={column.key}
+        currentAlignment={column.config.content_alignment}
       />
     );
     return this.goNext(columnHandlerResponse);

src/components/styles/TextAlignmentSelector.tsx

@@ -6,12 +6,12 @@ import Stack from "@mui/material/Stack";
 import ToggleButton from "@mui/material/ToggleButton";
 import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
 import { TextAlignmentProps } from "cdm/StyleModel";
-import { COLUMN_ALIGNMENT_OPTIONS } from "helpers/Constants";
+import { COLUMN_ALIGNMENT_OPTIONS, StyleVariables } from "helpers/Constants";
 
 export default function TextAlignmentSelector(props: TextAlignmentProps) {
-  const { modal, columnKey } = props;
+  const { modal, columnKey, currentAlignment } = props;
   const { view } = modal;
-  const [alignment, setAlignment] = React.useState("left");
+  const [alignment, setAlignment] = React.useState(currentAlignment);
 
   const handleAlignment = async (
     event: React.MouseEvent<HTMLElement>,
@@ -38,18 +38,36 @@ export default function TextAlignmentSelector(props: TextAlignmentProps) {
         <ToggleButton
           value={COLUMN_ALIGNMENT_OPTIONS.LEFT}
           aria-label="left aligned"
+          sx={{
+            color: StyleVariables.TEXT_NORMAL,
+            "&.Mui-selected, &.Mui-selected:hover": {
+              color: StyleVariables.TEXT_ACCENT,
+            },
+          }}
         >
           <FormatAlignLeftIcon />
         </ToggleButton>
         <ToggleButton
           value={COLUMN_ALIGNMENT_OPTIONS.CENTER}
           aria-label="centered"
+          sx={{
+            color: StyleVariables.TEXT_NORMAL,
+            "&.Mui-selected, &.Mui-selected:hover": {
+              color: StyleVariables.TEXT_ACCENT,
+            },
+          }}
         >
           <FormatAlignCenterIcon />
         </ToggleButton>
         <ToggleButton
           value={COLUMN_ALIGNMENT_OPTIONS.RIGHT}
           aria-label="right aligned"
+          sx={{
+            color: StyleVariables.TEXT_NORMAL,
+            "&.Mui-selected, &.Mui-selected:hover": {
+              color: StyleVariables.TEXT_ACCENT,
+            },
+          }}
         >
           <FormatAlignRightIcon />
         </ToggleButton>

styles.css

@@ -491,8 +491,8 @@ div.database-plugin__checkbox {
 
 .database-plugin__text-align-right {
   display: flex;
-  align-items: right;
   justify-content: flex-end;
+  text-align: right;
 }
 
 .database-plugin__text-align-center {
@@ -503,8 +503,8 @@ div.database-plugin__checkbox {
 
 .database-plugin__text-align-left {
   display: flex;
-  text-align: left;
   justify-content: flex-start;
+  text-align: left;
 }
 
 .cell-padding {