keannu125/Ivy-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Ivy-Frontend.git synced 2025-05-12 09:31:07 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Made icon sizing based on px rather than vh

Browse source
This commit is contained in:
Keannu Christian Bernasol 2023-03-03 12:35:32 +08:00
parent 2551b1fb38
commit c9b18608a1
24 changed files with 83 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/Components/ColoredCube/ColoredCube.tsx
View file

@ -10,8 +10,8 @@ export default function ColoredCube(props: props) {
<div
style={{
backgroundColor: props.color,
width: props.size + "vh",
height: props.size + "vh",
width: props.size + "px",
height: props.size + "px",
}}
/>
</div>

2
src/Components/Header/Header.tsx
View file

@ -7,7 +7,7 @@ export default function Header() {
return (
<div style={styles.header_wrapper}>
<div style={styles.header_left}>
<AppLogo size={8} color="#80b38b" />
<AppLogo size={64} color="#80b38b" />
<p style={styles.logo_title}>Ivy</p>
</div>
<div style={styles.header_right}>

4
src/Components/Icons/AppLogo/AppLogo.tsx
View file

@ -9,8 +9,8 @@ export default function AppLogo(props: props) {
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-plant-2"
width={props.size + "vh"}
height={props.size + "vh"}
width={props.size + "px"}
height={props.size + "px"}
viewBox="0 0 24 24"
stroke-width="2"
stroke={props.color}

4
src/Components/Icons/HomeIcon/HomeIcon.tsx
View file

@ -9,8 +9,8 @@ export default function HomeIcon(props: props) {
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-home-2"
width={props.size + "vh"}
height={props.size + "vh"}
width={props.size + "px"}
height={props.size + "px"}
viewBox="0 0 24 24"
stroke-width="2"
stroke={props.color}

4
src/Components/Icons/InventoryIcon/InventoryIcon.tsx
View file

@ -9,8 +9,8 @@ export default function InventoryIcon(props: props) {
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-box-seam"
width={props.size + "vh"}
height={props.size + "vh"}
width={props.size + "px"}
height={props.size + "px"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}

4
src/Components/Icons/LogoutIcon/LogoutIcon.tsx
View file

@ -9,8 +9,8 @@ export default function LogoutIcon(props: props) {
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-logout"
width={props.size + "vh"}
height={props.size + "vh"}
width={props.size + "px"}
height={props.size + "px"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}

4
src/Components/Icons/LogsIcon/LogsIcon.tsx
View file

@ -9,8 +9,8 @@ export default function LogsIcon(props: props) {
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-clipboard-data"
width={props.size + "vh"}
height={props.size + "vh"}
width={props.size + "px"}
height={props.size + "px"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}

4
src/Components/Icons/LowStockIcon/LowStockIcon.tsx
View file

@ -9,8 +9,8 @@ export default function LowStockIcon(props: props) {
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-zoom-exclamation"
width={props.size + "vh"}
height={props.size + "vh"}
width={props.size + "px"}
height={props.size + "px"}
viewBox="0 0 24 24"
stroke-width="2"
stroke={props.color}

4
src/Components/Icons/NotFoundIcon/NotFoundIcon.tsx
View file

@ -9,8 +9,8 @@ export default function NotFoundIcon(props: props) {
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-error-404"
width={props.size + "vh"}
height={props.size + "vh"}
width={props.size + "px"}
height={props.size + "px"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}

4
src/Components/Icons/ProductIcon/ProductIcon.tsx
View file

@ -8,8 +8,8 @@ export default function ProductIcon(props: props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={props.size + "vh"}
height={props.size + "vh"}
width={props.size + "px"}
height={props.size + "px"}
viewBox="0 0 24 24"
stroke-width="2"
stroke={props.color}

4
src/Components/Icons/ProductsIcon/ProductsIcon.tsx
View file

@ -9,8 +9,8 @@ export default function ProductsIcon(props: props) {
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-list-numbers"
width={props.size + "vh"}
height={props.size + "vh"}
width={props.size + "px"}
height={props.size + "px"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}

4
src/Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon.tsx
View file

@ -9,8 +9,8 @@ export default function RecentlyAddedIcon(props: props) {
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-book-upload"
width={props.size + "vh"}
height={props.size + "vh"}
width={props.size + "px"}
height={props.size + "px"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}

4
src/Components/Icons/StatsIcon/StatsIcon.tsx
View file

@ -9,8 +9,8 @@ export default function StatsIcon(props: props) {
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-align-box-bottom-center"
width={props.size + "vh"}
height={props.size + "vh"}
width={props.size + "px"}
height={props.size + "px"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}

4
src/Components/Icons/TotalProductsIcon/TotalProductsIcon.tsx
View file

@ -9,8 +9,8 @@ export default function TotalProductsIcon(props: props) {
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-packages"
width={props.size + "vh"}
height={props.size + "vh"}
width={props.size + "px"}
height={props.size + "px"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}

16
src/Components/Sidebar/Sidebar.tsx
View file

@ -37,20 +37,20 @@ export default function Sidebar() {
}}
>
<SidebarButton onClick={() => navigate("/")} name="Dashboard">
<HomeIcon size={4} color="white" />
<HomeIcon size={48} color="white" />
</SidebarButton>
<SidebarButton
onClick={() => navigate("/Products")}
name="Products"
>
<ProductsIcon size={4} color="white" />
<ProductsIcon size={48} color="white" />
</SidebarButton>
<SidebarButton
onClick={() => navigate("/Inventory")}
name="Inventory"
>
<InventoryIcon size={4} color="white" />
<InventoryIcon size={48} color="white" />
</SidebarButton>
</div>
</div>
@ -75,25 +75,25 @@ export default function Sidebar() {
}}
>
<SidebarButton onClick={() => navigate("/")} name="Dashboard">
<HomeIcon size={4} color="white" />
<HomeIcon size={48} color="white" />
</SidebarButton>
<SidebarButton
onClick={() => navigate("/Products")}
name="Products"
>
<ProductsIcon size={4} color="white" />
<ProductsIcon size={48} color="white" />
</SidebarButton>
<SidebarButton
onClick={() => navigate("/Inventory")}
name="Inventory"
>
<InventoryIcon size={4} color="white" />
<InventoryIcon size={48} color="white" />
</SidebarButton>
<SidebarButton onClick={() => navigate("/Logs")} name="Logs">
<LogsIcon size={4} color="white" />
<LogsIcon size={48} color="white" />
</SidebarButton>
<Logout>
<LogoutIcon size={4} color="white" />
<LogoutIcon size={48} color="white" />
</Logout>
</div>
</div>