small styling improvements

This commit is contained in:
Sara
2023-09-25 19:58:41 +02:00
parent edcee20ea8
commit e27dd6d304
4 changed files with 13 additions and 11 deletions

View File

@@ -1,6 +1,6 @@
"use client"; "use client";
import React, { useState } from "react"; import React, { useState } from "react";
import FullscreenModal from "../transcripts/fullsreenModal"; import FullscreenModal from "./fullsreenModal";
import AboutContent from "./aboutContent"; import AboutContent from "./aboutContent";
type AboutProps = { type AboutProps = {

View File

@@ -17,17 +17,17 @@ export default function FullscreenModal(props: ModalProps) {
className="fixed z-50 cursor-pointer top-0 bottom-0 left-0 right-0 flex justify-center items-center bg-black/10" className="fixed z-50 cursor-pointer top-0 bottom-0 left-0 right-0 flex justify-center items-center bg-black/10"
onClick={props.close} onClick={props.close}
> >
<div className="p-3 md:p-5 bg-white rounded-lg border-blue-300 h:auto max-w-[90svw] w-auto md:max-w-[80svw] relative pt-4"> <div
onClick={cancelClick}
className="p-4 md:p-6 bg-white rounded-lg border-blue-300 h:auto max-w-[90svw] w-auto md:max-w-[80svw] relative pt-4 cursor-default"
>
<button <button
className="absolute right-2 top-2 p-0 min-h-0" className="absolute right-2 top-2 p-0 min-h-0"
onClick={props.close} onClick={props.close}
> >
<FontAwesomeIcon icon={faClose} /> <FontAwesomeIcon icon={faClose} size="lg" />
</button> </button>
<div <div className="h-auto md:max-h-[75svh] max-h-[80svh] overflow-auto px-2 text-left">
className="h-auto md:max-h-[75svh] max-h-[80svh] overflow-auto px-2 cursor-default text-left"
onClick={cancelClick}
>
{props.children} {props.children}
</div> </div>
</div> </div>

View File

@@ -1,6 +1,6 @@
"use client"; "use client";
import React, { useState } from "react"; import React, { useState } from "react";
import FullscreenModal from "../transcripts/fullsreenModal"; import FullscreenModal from "./fullsreenModal";
import PrivacyContent from "./privacyContent"; import PrivacyContent from "./privacyContent";
type PrivacyProps = { type PrivacyProps = {

View File

@@ -4,13 +4,15 @@ type SimpleProps = {
}; };
const Title = ({ children, className }: SimpleProps) => ( const Title = ({ children, className }: SimpleProps) => (
<h2 className={`text-lg font-bold md:text-xl ${className}`}>{children}</h2> <h2 className={`text-lg font-bold md:text-xl ${className || ""}`}>
{children}
</h2>
); );
const Subtitle = ({ children, className }: SimpleProps) => ( const Subtitle = ({ children, className }: SimpleProps) => (
<h3 className={`text-base md:text-lg ${className}`}>{children}</h3> <h3 className={`text-base md:text-lg ${className || ""}`}>{children}</h3>
); );
const Paragraph = ({ children, className }: SimpleProps) => ( const Paragraph = ({ children, className }: SimpleProps) => (
<p className={`mb-2 md:mb-4 ${className}`}>{children}</p> <p className={`mb-2 md:mb-4 ${className || ""}`}>{children}</p>
); );
export { Title, Subtitle, Paragraph }; export { Title, Subtitle, Paragraph };