chore: fix container styles

This commit is contained in:
Steven 2023-10-18 06:02:39 +08:00
parent ddc4566dcb
commit 203b2d9181
5 changed files with 7 additions and 6 deletions

View file

@ -35,7 +35,7 @@ const Archived = () => {
}, [memos, textQuery]); }, [memos, textQuery]);
return ( return (
<section className="w-full max-w-3xl min-h-full flex flex-col justify-start items-start px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800"> <section className="@container w-full max-w-3xl min-h-full flex flex-col justify-start items-start px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
<MobileHeader showSearch={false} /> <MobileHeader showSearch={false} />
<MemoFilter /> <MemoFilter />
{loadingState.isLoading ? ( {loadingState.isLoading ? (

View file

@ -94,7 +94,7 @@ const DailyReview = () => {
const isFutureDateDisabled = isFutureDate(currentDateStamp + DAILY_TIMESTAMP); const isFutureDateDisabled = isFutureDate(currentDateStamp + DAILY_TIMESTAMP);
return ( return (
<section className="w-full max-w-3xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800"> <section className="@container w-full max-w-3xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
<MobileHeader showSearch={false} /> <MobileHeader showSearch={false} />
<div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300"> <div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300">
<div className="relative w-full flex flex-row justify-between items-center"> <div className="relative w-full flex flex-row justify-between items-center">

View file

@ -87,7 +87,7 @@ const Explore = () => {
}; };
return ( return (
<section className="w-full max-w-3xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800"> <section className="@container w-full max-w-3xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
<MobileHeader showSearch={false} /> <MobileHeader showSearch={false} />
{!loadingState.isLoading && ( {!loadingState.isLoading && (
<div className="relative w-full h-auto flex flex-col justify-start items-start"> <div className="relative w-full h-auto flex flex-col justify-start items-start">

View file

@ -8,6 +8,7 @@ import MobileHeader from "@/components/MobileHeader";
import ResourceIcon from "@/components/ResourceIcon"; import ResourceIcon from "@/components/ResourceIcon";
import { resourceServiceClient } from "@/grpcweb"; import { resourceServiceClient } from "@/grpcweb";
import useLoading from "@/hooks/useLoading"; import useLoading from "@/hooks/useLoading";
import i18n from "@/i18n";
import { Resource } from "@/types/proto/api/v2/resource_service"; import { Resource } from "@/types/proto/api/v2/resource_service";
import { useTranslate } from "@/utils/i18n"; import { useTranslate } from "@/utils/i18n";
@ -61,7 +62,7 @@ const Resources = () => {
}; };
return ( return (
<section className="w-full max-w-3xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800"> <section className="@container w-full max-w-3xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
<MobileHeader showSearch={false} /> <MobileHeader showSearch={false} />
<div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300"> <div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300">
<div className="relative w-full flex flex-row justify-between items-center"> <div className="relative w-full flex flex-row justify-between items-center">
@ -89,7 +90,7 @@ const Resources = () => {
<div key={timestamp} className="w-full flex flex-row justify-start items-start"> <div key={timestamp} className="w-full flex flex-row justify-start items-start">
<div className="w-16 sm:w-24 pt-4 sm:pl-4 flex flex-col justify-start items-start"> <div className="w-16 sm:w-24 pt-4 sm:pl-4 flex flex-col justify-start items-start">
<span className="text-sm opacity-60">{date.getFullYear()}</span> <span className="text-sm opacity-60">{date.getFullYear()}</span>
<span className="font-medium text-xl">{date.toLocaleString("default", { month: "short" })}</span> <span className="font-medium text-xl">{date.toLocaleString(i18n.language, { month: "short" })}</span>
</div> </div>
<div className="w-full max-w-[calc(100%-4rem)] sm:max-w-[calc(100%-6rem)] flex flex-row justify-start items-start gap-4 flex-wrap"> <div className="w-full max-w-[calc(100%-4rem)] sm:max-w-[calc(100%-6rem)] flex flex-row justify-start items-start gap-4 flex-wrap">
{resources.map((resource) => { {resources.map((resource) => {

View file

@ -43,7 +43,7 @@ const Setting = () => {
}; };
return ( return (
<section className="w-full max-w-3xl min-h-full flex flex-col justify-start items-start px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800"> <section className="@container w-full max-w-3xl min-h-full flex flex-col justify-start items-start px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
<MobileHeader showSearch={false} /> <MobileHeader showSearch={false} />
<div className="setting-page-wrapper"> <div className="setting-page-wrapper">
<div className="section-selector-container"> <div className="section-selector-container">