Changed Object Browser components to use new mds components

[bexsoft]

What does this do?

• Implemented new Embeddable Object Browser theming system
• Adjusted & fixed some style issues in Object Browser
• Fixed LegalHold & Retention screens

How to Test

For Common Console instance

Just run Console as you usually do

For Embeddable Object Browser

• Do Make assets
• Replace console in MinIO binary with this version
• Start browser in embedded mode, include one more query param called ov_st which will contain a base64 encoded string of the following JSON:

{
  "backgroundColor": "#1c1c1c",
  "fontColor": "white",
  "secondaryFontColor": "grey",
  "borderColor": "yellow",
  "loaderColor": "red",
  "boxBackground": "#0579af",
  "okColor": "#08af05",
  "errorColor": "#bf1e46",
  "warnColor": "#bfac1e",
  "linkColor": "#1ebfbf",
  "disabledLinkColor": "#9da0a0",
  "hoverLinkColor": "#0f4ebc",
  "tableColors": {
    "border": "#4bbc0f",
    "disabledBorder": "#728e63",
    "disabledBG": "#728e63",
    "selected": "#55db0d",
    "deletedDisabled": "#eab6d0",
    "hoverColor": "#00fff6"
  },
  "buttonStyles": {
    "backgroundColor": "#0073ff",
    "textColor": "#ffffff",
    "hoverColor": "#2b8eff",
    "hoverText": "#fff",
    "activeColor": "#3883d8",
    "activeText": "#fff",
    "disabledColor": "#758e8d",
    "disabledText": "#d9dddd"
  },
  "secondaryButtonStyles": {
    "backgroundColor": "#ea3379",
    "textColor": "#ea3379",
    "hoverColor": "#ea3300",
    "hoverText": "#ea3300",
    "activeColor": "#ea3379",
    "activeText": "#3cea33",
    "disabledColor": "#787c77",
    "disabledText": "#787c77"
  },
  "regularButtonStyles": {
    "backgroundColor": "#0073ff",
    "textColor": "#0073ff",
    "hoverColor": "#2b8eff",
    "hoverText": "#0073ff",
    "activeColor": "#3883d8",
    "activeText": "#0073ff",
    "disabledColor": "#758e8d",
    "disabledText": "#d9dddd"
  },
  "inputBox": {
    "border": "green",
    "hoverBorder": "blue",
    "textColor": "white",
    "backgroundColor": "#28d4ff"
  },
  "switch": {
    "switchBackground": "#28d4ff",
    "bulletBorderColor": "#a6acad",
    "bulletBGColor": "#dce1e2",
    "disabledBackground": "#474949",
    "disabledBulletBorderColor": "#474949",
    "disabledBulletBGColor": "#7397a0"
  }
}

How does it look?

[harshavardhana]

Please rebase the PR @bexsoft

[cniackz]

It looks amazing the dark mode 👍

[cesnietor]

Tested locally both embedded and stand alone and works great!