i desperatly need your help with a passion project of mine. i hae a sharepoint list i want to look like th emost beatiful, moder, viral website. the aim of the list is an approval system where i have a list of employees and their security role i need to be audited. based on my code impreove th elook and feel to look like the most trending app:{ "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json", "additionalRowClass": "sp-field-borderless", "viewFields": [ "Title", "field_1", "field_4", "field_5", "Decision_Status" ], "rowFormatter": { "elmType": "div", "style": { "display": "flex", "align-items": "center", "box-sizing": "border-box", "padding": "12px 16px", "margin": "6px 12px", "background-color": "#ffffff", "box-shadow": "0 1px 2px rgba(0,0,0,0.05), 0 2px 8px rgba(0,0,0,0.05)", "border-radius": "8px", "transition": "box-shadow 0.2s ease" }, "customRowAction": { "action": "defaultClick", "actionStyle": { "box-shadow": "0 4px 12px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.08)" } }, "children": [ { "elmType": "div", "style": { "display": "flex", "align-items": "center", "flex-basis": "30%", "padding-right": "16px" }, "children": [ { "elmType": "div", "attributes": { "iconName": "Contact" }, "style": { "font-size": "32px", "color": "#1c1c1e", "margin-right": "12px" } }, { "elmType": "div", "style": { "display": "flex", "flex-direction": "column" }, "children": [ { "elmType": "div", "txtContent": "=[Title]", "style": { "font-size": "14px", "font-weight": "600", "color": "#1c1c1e" } }, { "elmType": "div", "txtContent": "='ID: ' + [field_1]", "style": { "font-size": "13px", "color": "#86868b" } } ] } ] }, { "elmType": "div", "style": { "display": "flex", "align-items": "center", "flex-basis": "30%", "padding-left": "16px", "border-left": "1px solid #f2f2f7" }, "children": [ { "elmType": "div", "style": { "display": "flex", "flex-direction": "column" }, "children": [ { "elmType": "div", "txtContent": "=[field_4]", "style": { "font-size": "14px", "font-weight": "600", "color": "#1c1c1e" } }, { "elmType": "div", "txtContent": "=[field_5]", "style": { "font-size": "13px", "color": "#86868b" } } ] } ] }, { "elmType": "div", "style": { "display": "flex", "align-items": "center", "justify-content": "flex-end", "flex-grow": "1", "padding-left": "16px" }, "children": [ { "elmType": "div", "style": { "display": "=if([Decision_Status] == '', 'flex', 'none')", "align-items": "center", "gap": "10px" }, "children": [ { "elmType": "div", "style": { "display": "flex", "align-items": "center", "cursor": "pointer", "box-sizing": "border-box", "padding": "6px 16px", "border-radius": "50px", "font-size": "14px", "font-weight": "600", "border": "1.5px solid #34c759", "color": "#34c759", "background-color": "=if([Decision_Status] == 'Keep Role assignment', '#34c759', 'transparent')", "transition": "background-color 0.2s ease" }, "children": [ { "elmType": "div", "attributes": { "iconName": "Like" }, "style": { "margin-right": "6px" } }, { "elmType": "span", "txtContent": "Keep" } ], "customRowAction": { "action": "setValue", "actionInput": { "Decision_Status": "Keep Role assignment" }, "actionStyle": { "background-color": "rgba(52, 199, 89, 0.1)" } } }, { "elmType": "div", "style": { "display": "flex", "align-items": "center", "cursor": "pointer", "box-sizing": "border-box", "padding": "6px 16px", "border-radius": "50px", "font-size": "14px", "font-weight": "600", "border": "1.5px solid #ff3b30", "color": "#ff3b30", "background-color": "=if([Decision_Status] == 'To be removed', '#ff3b30', 'transparent')", "transition": "background-color 0.2s ease" }, "children": [ { "elmType": "div", "attributes": { "iconName": "Delete" }, "style": { "margin-right": "6px" } }, { "elmType": "span", "txtContent": "To be removed" } ], "customRowAction": { "action": "setValue", "actionInput": { "Decision_Status": "To be removed" }, "actionStyle": { "background-color": "rgba(255, 59, 48, 0.1)" } } } ] }, { "elmType": "div", "style": { "display": "=if([Decision_Status] == '', 'none', 'flex')", "align-items": "center" }, "children": [ { "elmType": "div", "style": { "width": "8px", "height": "8px", "border-radius": "50%", "margin-right": "8px", "background-color": "=if([Decision_Status] == 'Keep Role assignment', '#34c759', '#ff3b30')" } }, { "elmType": "span", "txtContent": "=if([Decision_Status] == 'Keep Role assignment', 'Kept', 'Removed')", "style": { "font-size": "14px", "font-weight": "500", "color": "=if([Decision_Status] == 'Keep Role assignment', '#34c759', '#ff3b30')" } } ] } ] } ] } }