monica-alexandria 3.12.2 → 3.12.4

package/dist/index.es.js

@@ -1306,12 +1306,21 @@ import e,{createContext as t,useContext as n,useState as r,useEffect as a}from"r
         transition-duration: .5s;
     }
 `,wn=i.div`
+    position: absolute;
+    outline: 1px solid ${e=>e.theme.mid};
+    top: 0;
+    left: 0;
+    padding: 2rem;
+    background: ${e=>e.theme.background};
+    height: 8.5rem;
+    width: 8.5rem;
 
     img{
         height: 100%;
         width: 100%;
+        object-fit: cover;
         border-radius: 50%;
-        background: ${e=>e.theme.high};
+        background: ${e=>e.theme.mid};
     }
 `,xn=t=>e.createElement(_n,{onClick:t.onClick},e.createElement("h5",{className:t.className+" SidebarButtonTitle"},t.text),t.icon?e.createElement(En,null,e.createElement(d,{Icon:t.icon})):t.img?e.createElement(wn,null,e.createElement("img",{src:t.img,alt:t.alt})):null),bn=i.div`
     display: flex;

package/dist/index.js

@@ -1306,12 +1306,21 @@
         transition-duration: .5s;
     }
 `,Yt=o.default.div`
+    position: absolute;
+    outline: 1px solid ${e=>e.theme.mid};
+    top: 0;
+    left: 0;
+    padding: 2rem;
+    background: ${e=>e.theme.background};
+    height: 8.5rem;
+    width: 8.5rem;
 
     img{
         height: 100%;
         width: 100%;
+        object-fit: cover;
         border-radius: 50%;
-        background: ${e=>e.theme.high};
+        background: ${e=>e.theme.mid};
     }
 `,Qt=o.default.div`
     display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monica-alexandria",
-  "version": "3.12.2",
+  "version": "3.12.4",
   "description": "A styled-components styles library for Doitforme platorm and universal tweeks to create your own new styled library for your project",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/export/components/sidebar/Sidebar_Box.js

@@ -66,12 +66,21 @@ const SidebarSvg = styled.div`
 `
 
 const SidebarImg = styled.div`
+    position: absolute;
+    outline: 1px solid ${p => p.theme.mid};
+    top: 0;
+    left: 0;
+    padding: 2rem;
+    background: ${p => p.theme.background};
+    height: 8.5rem;
+    width: 8.5rem;
 
     img{
         height: 100%;
         width: 100%;
+        object-fit: cover;
         border-radius: 50%;
-        background: ${p => p.theme.high};
+        background: ${p => p.theme.mid};
     }
 `
 

package/src/stories/sidebar/Sidebar.stories.jsx

@@ -7,14 +7,20 @@ export default{
     // decorators: [story => <SliderDummy>{story()}</SliderDummy> ]
 }
 
-export const Aside = (args) =>
+export const WithIcon = (args) =>
 <Sidebar_>
-    <Sidebar_Box 
-        text = 'Rocket'
-        icon = 'Rocket'
-    />
-    <Sidebar_Box 
-        text = 'Example box'
-        img = 'https://genius1071.friktoriaservers.net/doitforme/morning/app/icons/Minis.svg'
-    />
-</Sidebar_>
+    <Sidebar_Box {...args}/>
+</Sidebar_>
+WithIcon.args = {
+    text : "With icon",
+    icon : "Rocket"
+}
+
+export const WithImg = (args) =>
+<Sidebar_>
+    <Sidebar_Box {...args}/>
+</Sidebar_>
+WithImg.args = {
+    text : "With image",
+    img : "https://genius1071.friktoriaservers.net/doitforme/morning/app/icons/Home.svg"
+}