From 0ee5e22065aaa4f491f96b6d015d9a05acfe310f Mon Sep 17 00:00:00 2001 From: Mikan <83708535+piny940@users.noreply.github.com> Date: Fri, 30 Jun 2023 23:19:17 +0900 Subject: [PATCH] =?UTF-8?q?=E3=83=80=E3=83=BC=E3=82=AF=E3=83=86=E3=83=BC?= =?UTF-8?q?=E3=83=9E=EF=BC=81=20(#2)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * テーマを切り替えできるようにする * styleを修正 --- LICENSE | 201 ------------------ .../components/Common/ThemeToggler.test.tsx | 17 ++ package.json | 1 + src/components/Common/ThemeToggler.tsx | 43 ++++ src/layouts/Navbar.tsx | 25 ++- src/styles/globals.scss | 28 ++- src/utils/api.ts | 56 ----- yarn.lock | 19 +- 8 files changed, 121 insertions(+), 269 deletions(-) delete mode 100644 LICENSE create mode 100644 __tests__/components/Common/ThemeToggler.test.tsx create mode 100644 src/components/Common/ThemeToggler.tsx delete mode 100644 src/utils/api.ts diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 261eeb9e..00000000 --- a/LICENSE +++ /dev/null @@ -1,201 +0,0 @@ - Apache License - Version 2.0, January 2004 - http://www.apache.org/licenses/ - - TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION - - 1. Definitions. - - "License" shall mean the terms and conditions for use, reproduction, - and distribution as defined by Sections 1 through 9 of this document. - - "Licensor" shall mean the copyright owner or entity authorized by - the copyright owner that is granting the License. - - "Legal Entity" shall mean the union of the acting entity and all - other entities that control, are controlled by, or are under common - control with that entity. For the purposes of this definition, - "control" means (i) the power, direct or indirect, to cause the - direction or management of such entity, whether by contract or - otherwise, or (ii) ownership of fifty percent (50%) or more of the - outstanding shares, or (iii) beneficial ownership of such entity. - - "You" (or "Your") shall mean an individual or Legal Entity - exercising permissions granted by this License. - - "Source" form shall mean the preferred form for making modifications, - including but not limited to software source code, documentation - source, and configuration files. - - "Object" form shall mean any form resulting from mechanical - transformation or translation of a Source form, including but - not limited to compiled object code, generated documentation, - and conversions to other media types. - - "Work" shall mean the work of authorship, whether in Source or - Object form, made available under the License, as indicated by a - copyright notice that is included in or attached to the work - (an example is provided in the Appendix below). - - "Derivative Works" shall mean any work, whether in Source or Object - form, that is based on (or derived from) the Work and for which the - editorial revisions, annotations, elaborations, or other modifications - represent, as a whole, an original work of authorship. For the purposes - of this License, Derivative Works shall not include works that remain - separable from, or merely link (or bind by name) to the interfaces of, - the Work and Derivative Works thereof. - - "Contribution" shall mean any work of authorship, including - the original version of the Work and any modifications or additions - to that Work or Derivative Works thereof, that is intentionally - submitted to Licensor for inclusion in the Work by the copyright owner - or by an individual or Legal Entity authorized to submit on behalf of - the copyright owner. For the purposes of this definition, "submitted" - means any form of electronic, verbal, or written communication sent - to the Licensor or its representatives, including but not limited to - communication on electronic mailing lists, source code control systems, - and issue tracking systems that are managed by, or on behalf of, the - Licensor for the purpose of discussing and improving the Work, but - excluding communication that is conspicuously marked or otherwise - designated in writing by the copyright owner as "Not a Contribution." - - "Contributor" shall mean Licensor and any individual or Legal Entity - on behalf of whom a Contribution has been received by Licensor and - subsequently incorporated within the Work. - - 2. Grant of Copyright License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - copyright license to reproduce, prepare Derivative Works of, - publicly display, publicly perform, sublicense, and distribute the - Work and such Derivative Works in Source or Object form. - - 3. Grant of Patent License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - (except as stated in this section) patent license to make, have made, - use, offer to sell, sell, import, and otherwise transfer the Work, - where such license applies only to those patent claims licensable - by such Contributor that are necessarily infringed by their - Contribution(s) alone or by combination of their Contribution(s) - with the Work to which such Contribution(s) was submitted. If You - institute patent litigation against any entity (including a - cross-claim or counterclaim in a lawsuit) alleging that the Work - or a Contribution incorporated within the Work constitutes direct - or contributory patent infringement, then any patent licenses - granted to You under this License for that Work shall terminate - as of the date such litigation is filed. - - 4. Redistribution. You may reproduce and distribute copies of the - Work or Derivative Works thereof in any medium, with or without - modifications, and in Source or Object form, provided that You - meet the following conditions: - - (a) You must give any other recipients of the Work or - Derivative Works a copy of this License; and - - (b) You must cause any modified files to carry prominent notices - stating that You changed the files; and - - (c) You must retain, in the Source form of any Derivative Works - that You distribute, all copyright, patent, trademark, and - attribution notices from the Source form of the Work, - excluding those notices that do not pertain to any part of - the Derivative Works; and - - (d) If the Work includes a "NOTICE" text file as part of its - distribution, then any Derivative Works that You distribute must - include a readable copy of the attribution notices contained - within such NOTICE file, excluding those notices that do not - pertain to any part of the Derivative Works, in at least one - of the following places: within a NOTICE text file distributed - as part of the Derivative Works; within the Source form or - documentation, if provided along with the Derivative Works; or, - within a display generated by the Derivative Works, if and - wherever such third-party notices normally appear. The contents - of the NOTICE file are for informational purposes only and - do not modify the License. You may add Your own attribution - notices within Derivative Works that You distribute, alongside - or as an addendum to the NOTICE text from the Work, provided - that such additional attribution notices cannot be construed - as modifying the License. - - You may add Your own copyright statement to Your modifications and - may provide additional or different license terms and conditions - for use, reproduction, or distribution of Your modifications, or - for any such Derivative Works as a whole, provided Your use, - reproduction, and distribution of the Work otherwise complies with - the conditions stated in this License. - - 5. Submission of Contributions. Unless You explicitly state otherwise, - any Contribution intentionally submitted for inclusion in the Work - by You to the Licensor shall be under the terms and conditions of - this License, without any additional terms or conditions. - Notwithstanding the above, nothing herein shall supersede or modify - the terms of any separate license agreement you may have executed - with Licensor regarding such Contributions. - - 6. Trademarks. This License does not grant permission to use the trade - names, trademarks, service marks, or product names of the Licensor, - except as required for reasonable and customary use in describing the - origin of the Work and reproducing the content of the NOTICE file. - - 7. Disclaimer of Warranty. Unless required by applicable law or - agreed to in writing, Licensor provides the Work (and each - Contributor provides its Contributions) on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or - implied, including, without limitation, any warranties or conditions - of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A - PARTICULAR PURPOSE. You are solely responsible for determining the - appropriateness of using or redistributing the Work and assume any - risks associated with Your exercise of permissions under this License. - - 8. Limitation of Liability. In no event and under no legal theory, - whether in tort (including negligence), contract, or otherwise, - unless required by applicable law (such as deliberate and grossly - negligent acts) or agreed to in writing, shall any Contributor be - liable to You for damages, including any direct, indirect, special, - incidental, or consequential damages of any character arising as a - result of this License or out of the use or inability to use the - Work (including but not limited to damages for loss of goodwill, - work stoppage, computer failure or malfunction, or any and all - other commercial damages or losses), even if such Contributor - has been advised of the possibility of such damages. - - 9. Accepting Warranty or Additional Liability. While redistributing - the Work or Derivative Works thereof, You may choose to offer, - and charge a fee for, acceptance of support, warranty, indemnity, - or other liability obligations and/or rights consistent with this - License. However, in accepting such obligations, You may act only - on Your own behalf and on Your sole responsibility, not on behalf - of any other Contributor, and only if You agree to indemnify, - defend, and hold each Contributor harmless for any liability - incurred by, or claims asserted against, such Contributor by reason - of your accepting any such warranty or additional liability. - - END OF TERMS AND CONDITIONS - - APPENDIX: How to apply the Apache License to your work. - - To apply the Apache License to your work, attach the following - boilerplate notice, with the fields enclosed by brackets "[]" - replaced with your own identifying information. (Don't include - the brackets!) The text should be enclosed in the appropriate - comment syntax for the file format. We also recommend that a - file or class name and description of purpose be included on the - same "printed page" as the copyright notice for easier - identification within third-party archives. - - Copyright [yyyy] [name of copyright owner] - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. diff --git a/__tests__/components/Common/ThemeToggler.test.tsx b/__tests__/components/Common/ThemeToggler.test.tsx new file mode 100644 index 00000000..6735d7fb --- /dev/null +++ b/__tests__/components/Common/ThemeToggler.test.tsx @@ -0,0 +1,17 @@ +import { render, waitFor } from '@testing-library/react' +import { expect } from '@jest/globals' +import { + ThemeToggler, + ThemeTogglerProps, +} from '@/components/Common/ThemeToggler' +import { Mock } from 'ts-mockery' + +describe('', () => { + it('正常に描画される', async () => { + const props = Mock.from({}) + const component = render() + await waitFor(() => { + expect(component).toBeTruthy() + }) + }) +}) diff --git a/package.json b/package.json index 1e330a35..39effa22 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "@types/node": "20.2.5", "@types/react": "18.2.7", "@types/react-dom": "18.2.4", + "@types/styled-components": "^5.1.26", "@typescript-eslint/eslint-plugin": "^5.59.8", "@typescript-eslint/parser": "^5.0.0", "eslint": "8.41.0", diff --git a/src/components/Common/ThemeToggler.tsx b/src/components/Common/ThemeToggler.tsx new file mode 100644 index 00000000..7f03b56a --- /dev/null +++ b/src/components/Common/ThemeToggler.tsx @@ -0,0 +1,43 @@ +import { Theme } from '@/resources/types' +import { MaterialIcon } from './MaterialIcon' +import styled from 'styled-components' + +const TogglerDiv = styled.div` + height: 40px; + &:hover { + background-color: rgb(var(--bs-secondary-bg-rgb)); + } +` + +const TogglerA = styled.a` + width: 40px; + height: 40px; + padding: 8px; + display: block; +` + +export type ThemeTogglerProps = { + theme: Theme + toggleTheme: () => void +} + +export const ThemeToggler: React.FC = ({ + theme, + toggleTheme, +}) => { + return ( + + + {theme === 'light' ? ( + + ) : ( + + )} + + + ) +} diff --git a/src/layouts/Navbar.tsx b/src/layouts/Navbar.tsx index 9c3a16ac..4d95ec86 100644 --- a/src/layouts/Navbar.tsx +++ b/src/layouts/Navbar.tsx @@ -1,18 +1,33 @@ -import { IconButton } from '@/components/Navbar/IconButton' +import { ThemeToggler } from '@/components/Common/ThemeToggler' +import { useTheme } from '@/context/ThemeProvider' import { TestID } from '@/resources/TestID' import Link from 'next/link' +import { useCallback } from 'react' export const Navbar: React.FC = () => { + const { theme, setTheme } = useTheme() + const toggleTheme = useCallback(() => { + return () => { + setTheme(theme === 'light' ? 'dark' : 'light') + } + }, [theme]) + return ( ) diff --git a/src/styles/globals.scss b/src/styles/globals.scss index e1ea9861..7b974be9 100644 --- a/src/styles/globals.scss +++ b/src/styles/globals.scss @@ -1,11 +1,9 @@ @import '../../node_modules/bootstrap/scss/bootstrap.scss'; +@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&display=swap'); -html, -body { +html { padding: 0; margin: 0; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; } ::-webkit-full-page-media, @@ -17,6 +15,20 @@ body { --vh100: 100vh; min-height: 100vh; min-height: var(--vh100); + max-width: 100%; + font-family: 'Aria', 'Noto Sans JP', sans-serif; +} +.fw-bold { + font-family: var(--bs-body-font-family); +} +.root { + min-height: var(--vh100); +} +main { + max-width: 1320px; + width: 90%; + margin: auto; + margin-top: 1rem; } a { @@ -24,7 +36,7 @@ a { text-decoration: none; &:hover { - color: #0e6dfd; + color: var(--bs-link-color); } } @@ -65,7 +77,11 @@ $main: rgb(20, 214, 182); .title-border-main, h1 { border-left: 8px solid $main; - border-bottom: 2px solid $main; padding: 4px 16px; margin-bottom: 16px !important; + font-weight: 500; +} +[data-bs-theme='dark'] { + --bs-body-color-rgb: 210, 210, 210 !important; + --bs-body-color: #dddddd !important; } diff --git a/src/utils/api.ts b/src/utils/api.ts deleted file mode 100644 index b9da5040..00000000 --- a/src/utils/api.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { serialize } from 'object-to-formdata' - -const getToken = async (): Promise => { - const url = `/api/csrf` - const response = await fetch(url, { - credentials: 'include', - }) - const json = await response.json() - - return json.data.token -} - -export const fetchApi = async (params: { - url: string - method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE' - data?: any -}) => { - const response = await fetch(`/api${params.url}`, { - method: params.method, - headers: { - 'X-CSRF-Token': await getToken(), - }, - body: params.method === 'GET' ? null : serialize(params.data), - credentials: 'include', - }) - return response -} - -export const postData = async (params: { - url: string - data: object - scope?: string - onSuccess: (json: any) => void - onFail: (json: any) => void -}) => { - const response = await fetchApi({ - url: params.url, - method: 'POST', - data: params.scope ? { [params.scope]: params.data } : params.data, - }) - - return await response.json() -} - -export const updateData = async (params: { - url: string - data: object - scope?: string -}) => { - const response = await fetchApi({ - url: params.url, - method: 'PATCH', - data: params.scope ? { [params.scope]: params.data } : params.data, - }) - return await response.json() -} diff --git a/yarn.lock b/yarn.lock index b1cf015f..eb3b7294 100644 --- a/yarn.lock +++ b/yarn.lock @@ -939,6 +939,14 @@ dependencies: "@types/node" "*" +"@types/hoist-non-react-statics@*": + version "3.3.1" + resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" + integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== + dependencies: + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1": version "2.0.4" resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44" @@ -1041,6 +1049,15 @@ resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c" integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw== +"@types/styled-components@^5.1.26": + version "5.1.26" + resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.26.tgz#5627e6812ee96d755028a98dae61d28e57c233af" + integrity sha512-KuKJ9Z6xb93uJiIyxo/+ksS7yLjS1KzG6iv5i78dhVg/X3u5t1H7juRWqVmodIdz6wGVaIApo1u01kmFRdJHVw== + dependencies: + "@types/hoist-non-react-statics" "*" + "@types/react" "*" + csstype "^3.0.2" + "@types/testing-library__jest-dom@^5.9.1": version "5.14.6" resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.6.tgz#4887f6e1af11215428ab02777873bcede98a53b0" @@ -3012,7 +3029,7 @@ has@^1.0.3: dependencies: function-bind "^1.1.1" -hoist-non-react-statics@^3.0.0: +hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==