From f25f5bf2d5ed88394ca24adc7470eab32d00f3d6 Mon Sep 17 00:00:00 2001
From: Ariful Alam <ariful.alam@monstar-lab.com>
Date: Thu, 8 Sep 2022 21:46:09 +0600
Subject: [PATCH] Control avatar ring visibility

---
 README.md                            |  6 ++++++
 gitprofile.config.js                 |  3 +++
 src/components/GitProfile.jsx        |  7 ++++++-
 src/components/avatar-card/index.jsx | 11 +++++++++--
 src/helpers/utils.jsx                |  1 +
 types/index.d.ts                     |  5 +++++
 6 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index b7fd88f..98c8dee 100644
--- a/README.md
+++ b/README.md
@@ -9,6 +9,9 @@
     <a href="https://codeclimate.com/github/arifszn/gitprofile/maintainability">
       <img src="https://api.codeclimate.com/v1/badges/c60f42d7d0b61bd33e98/maintainability" />
     </a>
+    <a href="https://github.com/arifszn/gitprofile/actions/workflows/test-deploy.yml">
+      <img src="https://github.com/arifszn/gitprofile/actions/workflows/test-deploy.yml/badge.svg" />
+    </a>
     <a href="https://github.com/arifszn/gitprofile/issues">
       <img src="https://img.shields.io/github/issues/arifszn/gitprofile"/>
     </a>
@@ -234,6 +237,9 @@ const config = {
     // using user system preferences, instead of the hardcoded defaultTheme
     respectPrefersColorScheme: true,
 
+    // Hide the ring in Profile picture
+    hideAvatarRing: false,
+
     // Available themes. To remove any theme, exclude from here.
     themes: [
       'light',
diff --git a/gitprofile.config.js b/gitprofile.config.js
index a6c5c2f..948e926 100644
--- a/gitprofile.config.js
+++ b/gitprofile.config.js
@@ -98,6 +98,9 @@ const config = {
     // using user system preferences, instead of the hardcoded defaultTheme
     respectPrefersColorScheme: false,
 
+    // Hide the ring in Profile picture
+    hideAvatarRing: false,
+
     // Available themes. To remove any theme, exclude from here.
     themes: [
       'light',
diff --git a/src/components/GitProfile.jsx b/src/components/GitProfile.jsx
index d22ce48..4310905 100644
--- a/src/components/GitProfile.jsx
+++ b/src/components/GitProfile.jsx
@@ -156,7 +156,11 @@ const GitProfile = ({ config }) => {
                           themeConfig={sanitizedConfig.themeConfig}
                         />
                       )}
-                      <AvatarCard profile={profile} loading={loading} />
+                      <AvatarCard
+                        profile={profile}
+                        loading={loading}
+                        avatarRing={!sanitizedConfig.themeConfig.hideAvatarRing}
+                      />
                       <Details
                         profile={profile}
                         loading={loading}
@@ -281,6 +285,7 @@ GitProfile.propTypes = {
       defaultTheme: PropTypes.string,
       disableSwitch: PropTypes.bool,
       respectPrefersColorScheme: PropTypes.bool,
+      hideAvatarRing: PropTypes.bool,
       themes: PropTypes.array,
       customTheme: PropTypes.shape({
         primary: PropTypes.string,
diff --git a/src/components/avatar-card/index.jsx b/src/components/avatar-card/index.jsx
index 5b201b9..9f9bd02 100644
--- a/src/components/avatar-card/index.jsx
+++ b/src/components/avatar-card/index.jsx
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import { fallbackImage, skeleton } from '../../helpers/utils';
 import LazyImage from '../lazy-image';
 
-const AvatarCard = ({ profile, loading }) => {
+const AvatarCard = ({ profile, loading, avatarRing }) => {
   return (
     <div className="card shadow-lg compact bg-base-100">
       <div className="grid place-items-center py-8">
@@ -18,7 +18,13 @@ const AvatarCard = ({ profile, loading }) => {
           </div>
         ) : (
           <div className="avatar opacity-90">
-            <div className="mb-8 rounded-full w-32 h-32 ring ring-primary ring-offset-base-100 ring-offset-2">
+            <div
+              className={`mb-8 rounded-full w-32 h-32 ${
+                avatarRing
+                  ? 'ring ring-primary ring-offset-base-100 ring-offset-2'
+                  : ''
+              }`}
+            >
               {
                 <LazyImage
                   src={profile.avatar ? profile.avatar : fallbackImage}
@@ -57,6 +63,7 @@ const AvatarCard = ({ profile, loading }) => {
 AvatarCard.propTypes = {
   profile: PropTypes.object,
   loading: PropTypes.bool.isRequired,
+  avatarRing: PropTypes.bool.isRequired,
 };
 
 export default AvatarCard;
diff --git a/src/helpers/utils.jsx b/src/helpers/utils.jsx
index 4a640ee..6f0ee64 100644
--- a/src/helpers/utils.jsx
+++ b/src/helpers/utils.jsx
@@ -177,6 +177,7 @@ export const sanitizeConfig = (config) => {
       disableSwitch: config?.themeConfig?.disableSwitch || false,
       respectPrefersColorScheme:
         config?.themeConfig?.respectPrefersColorScheme || false,
+      hideAvatarRing: config?.themeConfig?.hideAvatarRing || false,
       themes: themes,
       customTheme: customTheme,
     },
diff --git a/types/index.d.ts b/types/index.d.ts
index 9bb711f..920947a 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -186,6 +186,11 @@ export interface ThemeConfig {
    */
   respectPrefersColorScheme?: boolean;
 
+  /**
+   * Hide the ring in Profile picture
+   */
+  hideAvatarRing?: boolean;
+
   /**
    * Available themes
    */