Tweaked CSS

This commit is contained in:
Bastian Meissner 2020-07-09 16:22:18 +02:00
parent f5f8566e77
commit 40b4bdca05
4 changed files with 29 additions and 27 deletions

View file

@ -17,7 +17,7 @@ const GlobalStyle = createGlobalStyle`
`;
const AppContainer = styled.div`
max-width: 85%;
max-width: 95%;
margin: auto;
`;

View file

@ -10,6 +10,9 @@ const AppContainer = styled.div`
`;
const IconContainer = styled.div`
display: flex;
justify-content: center;
align-items: center;
margin-right: 0.5rem;
`;
@ -50,7 +53,7 @@ export interface IAppProps {
export const App = ({ name, icon, url, displayURL }: IAppProps) => (
<AppContainer>
<IconContainer>
<Icon>{icon}</Icon>
<Icon name={icon} />
</IconContainer>
<DetailsContainer>
<AppLink href={url}>{name}</AppLink>

View file

@ -35,7 +35,7 @@ export const SubHeadline = styled.h3`
export const ItemList = styled.ul`
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-gap: 1rem;
padding: 0;
list-style: none;
@ -82,18 +82,12 @@ export const ErrorMessage = styled.p`
`;
interface IIconButtonProps {
icon: String;
icon: string;
onClick: any;
}
export const IconButton = ({ icon, onClick }: IIconButtonProps) => {
let StyledIcon = styled(Icon)`
text-color: ${selectedTheme.mainColor};
`;
return (
<StyledButton onClick={onClick}>
<StyledIcon>{icon}</StyledIcon>
</StyledButton>
);
};
export const IconButton = ({ icon, onClick }: IIconButtonProps) => (
<StyledButton onClick={onClick}>
<Icon name={icon} />
</StyledButton>
);

View file

@ -1,11 +1,11 @@
import React from "react";
import styled from "styled-components";
import selectedTheme from "./themeManager";
const Icon = styled.i`
export const RawIcon = styled.i`
font-family: "Material Icons";
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
@ -13,19 +13,24 @@ const Icon = styled.i`
word-wrap: normal;
white-space: nowrap;
direction: ltr;
text-color: ${selectedTheme.mainColor};
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
`;
export default Icon;
interface IIconProps {
name: string;
size?: string;
}
export const ComponentIcon = ({ name, size }: IIconProps) => {
let IconContainer = styled(RawIcon)`
font-size: ${size ? size : "24px"};
text-color: ${selectedTheme.mainColor};
`;
return <IconContainer>{name}</IconContainer>;
};
export default ComponentIcon;