refactor: adjust input media aesthetics details (#599)

* refactor: adjust input media aesthetics details * refactor: adjust input media min size & hover --------- Co-authored-by: juliaM <[email protected]>
devhatt · Aug 29, 2024 · 45ba097 · 45ba097
1 parent 9340af5
commit 45ba097
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/src/components/MainComposer/components/InputMediaGroup/InputMediaGroup.module.scss b/src/components/MainComposer/components/InputMediaGroup/InputMediaGroup.module.scss
@@ -4,10 +4,10 @@
   width: 100%;
 
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
   gap: 1.4rem;
 
-  align-items: center;
+  align-items: start;
   justify-content: start;
 
   .imageGroup {
@@ -31,6 +31,7 @@
 
     .removeButton {
       width: 2.2rem;
+      height: 2.2rem;
 
       color: global.$tertiaryPurple;
       text-align: center;

diff --git a/...ents/MainComposer/components/InputMediaGroup/components/InputMedia/InputMedia.module.scss b/...ents/MainComposer/components/InputMediaGroup/components/InputMedia/InputMedia.module.scss
@@ -2,19 +2,24 @@
 
 .button,
 .buttonSelected {
+  height: 100%;
   overflow: hidden;
 
   display: flex;
 
   align-items: center;
   justify-content: center;
 
+  padding: 5.2rem;
+
+  position: relative;
+
   transition: color 0.3s ease;
 
   cursor: pointer;
 
   &:hover {
-    background-color: global.$hovering;
+    background-color: global.$pressing;
   }
 }
 
@@ -34,6 +39,10 @@
 
 .imagePlaceholder,
 .imageSelected {
+  max-width: 100%;
+  max-height: 100%;
+
+  position: absolute;
   object-fit: cover;
 }