mirrors/VogelSocialMedia
1
0
Fork 0
mirror of https://github.com/bubblecup-12/VogelSocialMedia.git synced 2025-07-08 03:28:50 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

remove unnecessary files and rename custom button

Browse source
This commit is contained in:
luisa.bellitto 2025-06-23 21:13:32 +02:00 • committed by Rudi Regentonne
parent 1c9014f553
commit c47d31703c
10 changed files with 95 additions and 18299 deletions
Download patch file Download diff file Expand all files Collapse all files

4
code/frontend/src/components/Bio.tsx
View file

@ -7,7 +7,7 @@ import "./bio.css";
import "../styles/colors.css";
import IconButton from "@mui/material/IconButton";
import EditSquareIcon from "@mui/icons-material/EditSquare";
import ButtonPrimary from "./ButtonPrimary";
import ButtonPrimary from "./ButtonRotkehlchen";
export default function MultilineTextFields() {
const toggleEditMode = () => {
@ -40,7 +40,7 @@ export default function MultilineTextFields() {
/>
</IconButton>
</div>
{editMode && <ButtonPrimary value={"Ok"} onClick={toggleEditMode} />}
{editMode && <ButtonPrimary style="primary" label={"Ok"} onClick={toggleEditMode} />}
</Box>
</StyledEngineProvider>
);

18
code/frontend/src/components/ButtonPrimary.tsx
View file

@ -1,18 +0,0 @@
import "./buttonPrimary.css";
interface ButtonPrimaryProps {
value: string;
onClick?: () => void;
}
export default function ButtonPrimary({ value, onClick }: ButtonPrimaryProps) {
return (
<button
type="submit"
className="login-button body-m"
onClick={onClick}
>
{value}
</button>
);
}

32
code/frontend/src/components/ButtonRotkehlchen.tsx Normal file
View file

@ -0,0 +1,32 @@
import "./buttonRotkehlchen.css";
interface ButtonPrimaryProps {
style: "primary" | "secondary";
label: string;
onClick?: () => void;
}
export default function ButtonPrimary({ style, label, onClick }: ButtonPrimaryProps) {
return (
<>
{style === "primary" && (
<button
type="submit"
className="button-primary body-m"
onClick={onClick}
>
{label}
</button>
)}
{style === "secondary" && (
<button
type="button"
className="button-secondary body-m"
onClick={onClick}
>
{label}
</button>
)}
</>
);
}

5
code/frontend/src/components/ChangeAvatarDialog.tsx
View file

@ -16,7 +16,7 @@ import EditSquareIcon from "@mui/icons-material/EditSquare";
import "../styles/colors.css";
import "../styles/fonts.css";
import "./changeAvatarDialog.css";
import ButtonPrimary from "./ButtonPrimary";
import ButtonRotkehlchen from "./ButtonRotkehlchen";
import { useFilePicker } from "use-file-picker";
const BootstrapDialog = styled(Dialog)(({ theme }) => ({
@ -136,7 +136,8 @@ export default function CustomizedDialogs() {
</DialogContent>
<Divider variant="middle" className="divider" />
<DialogActions>
<ButtonPrimary value="Save Changes" onClick={handleSaveChanges} />
<ButtonRotkehlchen style="primary" label="Save Changes" onClick={handleSaveChanges} />
<ButtonRotkehlchen style="secondary" label="Cancel" onClick={handleClose} />
</DialogActions>
</BootstrapDialog>
</React.Fragment>

26
code/frontend/src/components/buttonPrimary.css
View file

@ -1,26 +0,0 @@
.login-button {
display: inline-flex;
padding: auto;
justify-content: center;
align-items: center;
cursor: pointer;
padding-left: 1rem;
padding-right: 1rem;
width: fit-content;
margin: 1rem;
border-radius: 10px;
border: 2px solid var(--Rotkehlchen-orange-default);
background: var(--Rotkehlchen-yellow-default);
}
.login-button:hover {
border-radius: 10px;
border: 2px solid var(--Rotkehlchen-orange-default);
background: var(--Rotkehlchen-yellow-hover);
}
.login-button:active {
border-radius: 10px;
border: 2px solid var(--Rotkehlchen-orange-default);
background: var(--Rotkehlchen-orange-default);
}

55
code/frontend/src/components/buttonRotkehlchen.css Normal file
View file

@ -0,0 +1,55 @@
.button-primary {
display: inline-flex;
justify-content: center;
align-items: center;
cursor: pointer;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 1rem;
padding-right: 1rem;
width: fit-content;
margin: 1rem;
border-radius: 10px;
border: 2px solid var(--Rotkehlchen-orange-default);
background: var(--Rotkehlchen-yellow-default);
}
.button-primary:hover {
border-radius: 10px;
border: 2px solid var(--Rotkehlchen-orange-default);
background: var(--Rotkehlchen-yellow-hover);
}
.button-primary:active {
border-radius: 10px;
border: 2px solid var(--Rotkehlchen-orange-default);
background: var(--Rotkehlchen-orange-default);
}
.button-secondary {
display: inline-flex;
justify-content: center;
align-items: center;
cursor: pointer;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 1rem;
padding-right: 1rem;
width: fit-content;
margin: 1rem;
border-radius: 10px;
border: 2px solid var(--Rotkehlchen-yellow-default);
background: var(--Rotkehlchen-gray);
}
.button-secondary:hover {
border-radius: 10px;
border: 2px solid var(--Rotkehlchen-yellow-default);
background: var(--Rotkehlchen-gray-hover);
}
.button-secondary:active {
border-radius: 10px;
border: 2px solid var(--Rotkehlchen-yellow-default);
background: var(--Rotkehlchen-yellow-default);
}