for for dashboard

massalabs · Jun 23, 2023 · f56966f · f56966f
1 parent 1f6f485
commit f56966f
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 10 deletions.
diff --git a/src/components/DashboardStation/DashboardStation.tsx b/src/components/DashboardStation/DashboardStation.tsx
@@ -15,6 +15,7 @@ export function DashboardStation(props: IDashboardStationProps) {
   let { imagesDark, imagesLight, components, theme } = props;
 
   const [images, setImages] = useState<ReactNode[]>([]);
+  const sizeClass = 'h-full w-full';
 
   function loadImages() {
     let imageList: ReactNode[] = [...components];
@@ -38,20 +39,26 @@ export function DashboardStation(props: IDashboardStationProps) {
       className="grid lg:grid-cols-6 grid-cols-3 grid-rows-2 gap-8"
       data-testid="dashboard-station"
     >
-      <div className="col-span-2 row-span-2">{images[0]}</div>
-      <div className="col-start-3">{images[1]}</div>
-      <div className="col-start-3 row-start-2">{images[2]}</div>
+      <div className="col-span-2 row-span-2">
+        <div className={`${sizeClass}`}>{images[0]}</div>
+      </div>
+      <div className="col-start-3">
+        <div className={`${sizeClass}`}>{images[1]}</div>
+      </div>
+      <div className="col-start-3 row-start-2">
+        <div className={`${sizeClass}`}>{images[2]}</div>
+      </div>
       <div className="row-start-3 lg:col-span-2 lg:row-span-2 lg:col-start-4 lg:row-start-1">
-        {images[3]}
+        <div className={`${sizeClass}`}>{images[3]}</div>
       </div>
       <div className="col-start-1 row-start-4 lg:col-start-6 lg:row-start-1">
-        {images[4]}
+        <div className={`${sizeClass}`}>{images[4]}</div>
       </div>
       <div
         className="col-span-2 row-span-2 col-start-2 row-start-3
       lg:col-span-1 lg:row-span-1 lg:col-start-6 lg:row-start-2"
       >
-        {images[5]}
+        <div className={`${sizeClass}`}>{images[5]}</div>
       </div>
     </div>
   );

diff --git a/src/components/PluginWallet/PluginWallet.tsx b/src/components/PluginWallet/PluginWallet.tsx
@@ -34,8 +34,11 @@ export function ActivePlugin(props: ActivePluginProps) {
     <>
       {iconActive}
       <div className="w-full py-6 text-f-primary bg-secondary flex flex-col items-center">
-        <div className="w-4/5 px-4 py-2 text-center mas-subtitle min-[450px]:mas-title">
-          {title}
+        <div
+          className="px-4 py-2 lg:h-14 mas-title min-[0px]:text-xl sm:text-4xl
+                        min-[790px]:text-4xl lg:text-2xl xl:text-3xl min-[1330px]:text-4xl"
+        >
+          <p className="text-center">{title}</p>
         </div>
         <div className="w-4/5 px-4 py-2">
           <Button onClick={onClickActive} preIcon={<FiArrowUpRight />}>
@@ -54,8 +57,8 @@ export function InactivePlugin(props: InactivePluginProps) {
     <>
       {iconInactive}
       <div className="w-full py-6 text-f-primary bg-secondary flex flex-col items-center">
-        <div className="w-4/5 px-4 py-2 text-center mas-buttons">
-          {`${title} is not installed in your station`}
+        <div className="w-4/5 px-4 py-2 mas-buttons lg:h-14 flex items-center justify-center">
+          <p className="text-center">{`${title} is not installed in your station`}</p>
         </div>
         <div className="w-4/5 px-4 py-2">
           <Button onClick={onClickInactive}>Install</Button>