This is an automated email from the ASF dual-hosted git repository. mintsweet pushed a commit to branch feat-logo-horizontal in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
commit 1916f7741b87c8817185e0d5fc6b6526481787f0 Author: mintsweet <[email protected]> AuthorDate: Tue Apr 16 10:05:29 2024 +0800 feat: support logo horizontal mode in onboard --- config-ui/src/components/logo/index.tsx | 6 ++++-- config-ui/src/images/logo-horizontal.svg | 32 ++++++++++++++++++++++++++++++++ config-ui/src/routes/onboard/step-0.tsx | 2 +- 3 files changed, 37 insertions(+), 3 deletions(-) diff --git a/config-ui/src/components/logo/index.tsx b/config-ui/src/components/logo/index.tsx index bc68a8e65..1de4ab241 100644 --- a/config-ui/src/components/logo/index.tsx +++ b/config-ui/src/components/logo/index.tsx @@ -19,6 +19,7 @@ import styled from 'styled-components'; import LogoImg from '@/images/logo.svg'; +import LogoHorizontalImg from '@/images/logo-horizontal.svg'; const Wrapper = styled.div` display: flex; @@ -27,12 +28,13 @@ const Wrapper = styled.div` interface Props { style?: React.CSSProperties; + direction?: 'vertical' | 'horizontal'; } -export const Logo = ({ style }: Props) => { +export const Logo = ({ style, direction = 'vertical' }: Props) => { return ( <Wrapper style={style}> - <img src={LogoImg} alt="Logo" /> + <img src={direction === 'horizontal' ? LogoHorizontalImg : LogoImg} alt="Logo" /> </Wrapper> ); }; diff --git a/config-ui/src/images/logo-horizontal.svg b/config-ui/src/images/logo-horizontal.svg new file mode 100644 index 000000000..9f1faf1a3 --- /dev/null +++ b/config-ui/src/images/logo-horizontal.svg @@ -0,0 +1,32 @@ +<!-- +Licensed to the Apache Software Foundation (ASF) under one or more +contributor license agreements. See the NOTICE file distributed with +this work for additional information regarding copyright ownership. +The ASF licenses this file to You 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. +--> +<svg width="187" height="36" viewBox="0 0 187 36" fill="none" xmlns="http://www.w3.org/2000/svg";> + <circle cx="18" cy="18" r="18" fill="#7497F7" /> + <path + d="M27.2666 21.181C26.1398 21.2072 25.1051 21.1333 24.1477 20.9814C25.2268 20.0089 25.8614 18.6709 25.7828 17.2248C25.7085 15.859 25.0105 14.6518 23.9395 13.7958C25.3751 13.1847 27.0381 12.2308 27.8974 10.87C28.8945 9.29095 28.2836 7.9597 27.7952 7.2734C27.6 6.99904 27.1407 6.97372 26.8572 7.22317L20.8358 12.5224C20.5172 12.484 20.1906 12.4688 19.8585 12.4773C20.8683 11.2836 21.8612 9.71261 22.1299 7.94704C22.4797 5.6488 21.2764 4.53028 20.4771 4.05164C20.1577 3.86044 19.6731 4.09132 [...] + fill="white" /> + <path + d="M17.5752 16.2335C17.5752 16.9933 18.1916 17.6087 18.9517 17.6087C19.7122 17.6087 20.3282 16.9933 20.3282 16.2335C20.3282 15.4738 19.7122 14.8584 18.9517 14.8584C18.1912 14.8584 17.5752 15.4738 17.5752 16.2335Z" + fill="#FF8B8B" /> + <path fill-rule="evenodd" clip-rule="evenodd" + d="M4.87944 30.3233C3.55275 28.9114 2.4514 27.2852 1.63281 25.5023C4.26934 24.7055 7.85283 23.9614 11.7492 23.9614C14.6874 23.9614 16.9138 24.5121 18.9732 25.0214L18.9821 25.0236L19.0035 25.0289C21.0338 25.531 22.9621 26.0079 25.6729 26.1284C29.0401 26.278 32.1903 25.4279 34.7304 24.6526C33.6961 27.2516 32.0737 29.5527 30.0276 31.3917C28.5696 31.5943 27.0189 31.6997 25.4285 31.629C22.1695 31.4842 19.8012 30.8983 17.757 30.3926L17.6601 30.3686C15.6174 29.8634 13.9607 29.4675 11.7492 2 [...] + fill="white" /> + <path fill-rule="evenodd" clip-rule="evenodd" + d="M43.7135 26.2439H41L44.298 14.2072C44.6551 12.9037 45.8398 12 47.1914 12H50.7464C51.898 12 52.8117 12.9702 52.7428 14.1198L52.0155 26.2439H49.3829L49.7814 21.3181H45.0469L43.7135 26.2439ZM50.3003 14.9061L49.9692 18.9988H45.6746L46.7581 14.9964C46.8761 14.5604 47.2717 14.2577 47.7233 14.2577H49.7023C50.0527 14.2577 50.3286 14.5568 50.3003 14.9061ZM96.3583 17.5699L94.9742 26.4657H92.6015L93.8669 18.3513C93.946 17.7702 93.8274 17.7502 93.3331 17.7502H89.5367L88.1922 26.4657H85.8195L8 [...] + fill="#7497F7" /> +</svg> + \ No newline at end of file diff --git a/config-ui/src/routes/onboard/step-0.tsx b/config-ui/src/routes/onboard/step-0.tsx index e880c3857..4a793d502 100644 --- a/config-ui/src/routes/onboard/step-0.tsx +++ b/config-ui/src/routes/onboard/step-0.tsx @@ -59,7 +59,7 @@ interface Props { title?: React.ReactNode; } -export const Step0 = ({ logo = <Logo />, title = 'DevLake' }: Props) => { +export const Step0 = ({ logo = <Logo direction="horizontal" />, title = 'DevLake' }: Props) => { const [operating, setOperating] = useState(false); const { step, records, done, projectName, plugin, setStep } = useContext(Context);
