github.com/minio/console@v1.4.1/web-app/src/screens/Console/Support/RegistrationStatusBanner.tsx (about)

     1  // This file is part of MinIO Console Server
     2  // Copyright (c) 2022 MinIO, Inc.
     3  //
     4  // This program is free software: you can redistribute it and/or modify
     5  // it under the terms of the GNU Affero General Public License as published by
     6  // the Free Software Foundation, either version 3 of the License, or
     7  // (at your option) any later version.
     8  //
     9  // This program is distributed in the hope that it will be useful,
    10  // but WITHOUT ANY WARRANTY; without even the implied warranty of
    11  // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    12  // GNU Affero General Public License for more details.
    13  //
    14  // You should have received a copy of the GNU Affero General Public License
    15  // along with this program.  If not, see <http://www.gnu.org/licenses/>.
    16  
    17  import React from "react";
    18  import { VerifiedIcon, Box, breakPoints } from "mds";
    19  
    20  const RegistrationStatusBanner = ({ email = "" }: { email?: string }) => {
    21    return (
    22      <Box
    23        sx={{
    24          height: 67,
    25          color: "#ffffff",
    26          display: "flex",
    27          position: "relative",
    28          top: -30,
    29          left: -32,
    30          width: "calc(100% + 64px)",
    31          alignItems: "center",
    32          justifyContent: "space-between",
    33          backgroundColor: "#2781B0",
    34          padding: "0 25px 0 25px",
    35          "& .registered-box, .reg-badge-box": {
    36            display: "flex",
    37            alignItems: "center",
    38            justifyContent: "flex-start",
    39          },
    40  
    41          "& .reg-badge-box": {
    42            marginLeft: "20px",
    43  
    44            "& .min-icon": {
    45              fill: "#2781B0",
    46            },
    47          },
    48        }}
    49      >
    50        <Box className="registered-box">
    51          <Box sx={{ fontSize: "16px", fontWeight: 400 }}>Register status:</Box>
    52          <Box className="reg-badge-box">
    53            <VerifiedIcon />
    54            <Box
    55              sx={{
    56                fontWeight: 600,
    57              }}
    58            >
    59              Registered
    60            </Box>
    61          </Box>
    62        </Box>
    63  
    64        <Box
    65          className="registered-acc-box"
    66          sx={{
    67            alignItems: "center",
    68            justifyContent: "flex-start",
    69            display: "flex",
    70            [`@media (max-width: ${breakPoints.sm}px)`]: {
    71              display: "none",
    72            },
    73          }}
    74        >
    75          <Box sx={{ fontSize: "16px", fontWeight: 400 }}>Registered to:</Box>
    76          <Box sx={{ marginLeft: "8px", fontWeight: 600 }}>{email}</Box>
    77        </Box>
    78      </Box>
    79    );
    80  };
    81  export default RegistrationStatusBanner;